在JWT中存储自定义用户角色，以便用于React？

Question

我是非常新的反应和分离的前端/后端开发(以前我的应用程序都是耦合在一起，如ASP.NET网站)。最近，我正在构建一个纯粹的React作为我的前端，.NET核心作为我的后端，ADFS4.0作为我的intranet auth服务器，我的用户角色被安全地存储在OracleDB中。

我现在的设计如下：

1) React应用程序将通过用户声明从ADFS获取访问令牌(使用react-adal)。

2) React应用程序将使用Bearer令牌调用我的核心后端；后端将处理JWT并检查ADFS

3)在经过身份验证后，用户角色将从数据库中检索。

4)角色将作为JWT或用户对象返回以响应应用程序

问题：

1)我是否应该将用户角色存储在一个全新的JWT中，这个JWT是我自己设计的(并使用我自己的证书签名)，它来自我的Core后端(我主要需要这样的角色来路由，这样管理员就可以访问管理功能，而普通用户则不能)。我使用Jwt Bearer属性保护我的核心端点，因此我估计我将为API后端使用自己的Jwt令牌。

2)假设我使用Jwt令牌来存储我的用户角色，以供我的反应性应用程序使用，我是否应该将JWT存储在sessionStorage中，以便当用户关闭web浏览器时，该令牌将与会话一起删除？考虑到当浏览器关闭时会话将被销毁，我可以将JWT exp时间设置为更长的时间，比方说在一天结束时到期？

Answer 1

TL；博士将用户对象保存在redux中，将JWT保存在cookies中。

如果从服务器获取用户对象，则存储此用户对象而不是JWT。您可以使用Redux存储用户对象，以便您可以随时在任何组件中访问用户的角色和其他属性。另外，您最好将JWT存储在cookies中。对于这个https://www.npmjs.com/package/react-cookie，有一个很好的反应包

如果希望用户会话在浏览器关闭时完成，则可以与会话一起进行。这是一个设计决策。但是，现在几乎所有的网站都在使用cookie来存储令牌。

Answer 2

这里是确保完美安全的指南：

1. JWT令牌必须始终仅由后端服务加密和验证。
2. 用户界面将只保留令牌并将其提交给每个请求的后端。
3. UI将永远无法解密/理解令牌的内容(声明)。

。

实现此机制的最简单方法是将后端与OpenID Connect服务集成，如Keycloak、Okta、OpenAM、ForgeRock等。

更多信息：

https://scalac.io/user-authentication-keycloak-1/

https://developer.okta.com/code/react/

https://github.com/dasniko/keycloak-reactjs-demo

https://www.npmjs.com/package/react-keycloak