将自定义用户角色存储在JWT中以用于React SPA

我对React和前端/后端开发的分离非常陌生(以前我的应用程序都耦合在一起，例如ASP.NET网站(。最近，我正在构建一个纯粹的React SPA作为我的前端。NET CORE作为我的后端，ADFS 4.0作为我的intranet身份验证服务器，我的用户角色都安全地存储在OracleDB中。

我目前的设计如下：

1( React应用程序将从ADFS获得一个访问令牌，用户声明(使用React adal(

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

3( 通过身份验证后，将从数据库中检索用户角色

4( 角色将作为JWT或用户对象返回到React应用程序

问题：

1( 我是否应该将用户角色存储在一个全新的JWT中，该JWT是我自己从Core后端创建的(并使用自己的证书签名((我主要需要用于路由的角色，以便管理员可以访问管理功能，而普通用户不能(。我用Jwt Bearer属性保护我的核心端点，所以我认为我将为我的API后端制作我自己的Jwt令牌来消费。

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

TL；DR将用户对象保存在redux存储中，将JWT保存在cookie中。

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

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

以下是确保完美安全的指南：

实现此机制的最简单方法是将后端与OpenIDConnect服务集成，如Keycapture、Okta、OpenAM、ForgeLock等

更多信息：

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

相关内容