在 JWT 中存储自定义用户角色以在 React SPA 中使用？答案

【问题标题】：Storing custom user roles in JWT for use in React SPA?在 JWT 中存储自定义用户角色以在 React SPA 中使用？
【发布时间】：2020-06-22 04:03:43
【问题描述】：

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

我目前的设计如下：

1) React 应用程序将使用用户声明从 ADFS 获取访问令牌（使用 react-adal）

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

3) 验证后，将从数据库中检索用户角色

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

问题：

1）我是否应该将用户角色存储在我从核心后端自己制作（并使用我自己的证书签名）的全新 JWT 中（我主要需要路由角色，以便管理员可以在普通用户时访问管理员功能不能）。我使用 Jwt Bearer 属性保护我的核心端点，因此我认为我将制作我自己的 Jwt 令牌供我的 API 后端使用。

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

【问题讨论】：

标签： reactjs jwt

【解决方案1】：

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

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

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

【讨论】：

我同意你的观点，这是使用会话的设计决策。由于我在 Intranet 环境中并且用户通常使用 ADFS 进行身份验证，因此我们要做的是为用户提供无缝的 SSO 体验。当用户链接到该站点时，身份验证将启动，从数据库中检索我的用户角色并制作自定义 JWT 以在会话期间供前端使用。用户角色可以与 redux 或 React 上下文一起用于路由等。由于用户每次都会自动触发 SSO，因此我们正在考虑在浏览器关闭时结束会话。这可行吗？

【解决方案2】：

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

JWT 令牌必须始终仅由后端服务加密和验证。
UI 只会随身携带令牌，并针对每个请求将其提交给后端。
UI 将永远无法解密/理解令牌的内容（声明）。

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

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

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

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

【讨论】：

感谢您的评论！由于我的应用程序位于 Intranet 环境中，因此我无法访问其他云服务。但是，我使用 ADFS 4.0 并使用 OIDC 进行身份验证。 1) 我生成的自定义 JWT 令牌将是非对称的，并由我的自定义证书签名，并且每个请求都将得到验证。 2) JWT 将存储在会话中，并作为承载令牌附加到每个 API 请求。
完美！如果 JWT 保持在会话中并由后端为每个 API 请求解密，那么这足以维护基于角色的授权。如果将用户角色指定为 JWT 的声明之一，则可以避免创建单独的 JWT。