如何使用 jwt 在 React 中正确存储当前用户信息

Posted 2023-02-22

【中文标题】如何使用 jwt 在 React 中正确存储当前用户信息

【英文标题】：How to properly store current user information in React using jwt

【发布时间】：2021-02-18 03:53:59

【问题描述】：

我目前正在通过使用 .NET Core 和 React 开发一个简单的 Web 应用程序来学习身份验证和授权。我的后端使用 jwt 设置了一堆受保护的路由。现在登录后，我得到一个访问令牌、一个刷新令牌和当前用户角色，并将它们存储在一个 cookie 中。这很好用，但是，如果用户要编辑他的角色让我们说管理员，我会遇到一些问题。当服务器从访问令牌中获取实际角色时，他仍然无法访问管理端点，但会呈现管理员用户界面。令牌本身也有类似的问题，在我当前的实现中，如果未定义 cookie，则认为用户已通过身份验证，因此来宾用户可能会在其中放入一些乱码，并且还会看到一些他不应该看到的导航组件。 我在网上看到很多使用 localStorage 存储用户信息的示例，但我认为这会遇到同样的问题。我的主要问题是，这首先是否是一个大的安全问题（因为用户只能看到一些在单击时什么都不做的额外按钮），如果是，有什么好的方法来解决它？我正在考虑从服务器获取当前用户角色（并同时验证令牌本身），但每次我想渲染导航组件时都需要这样做，所以听起来很笨重。

【问题讨论】：

1) localStorage 是个好方法。 2) 您可能会在客户端和服务器部分之间复制逻辑以提供最佳用户体验。 3) 通过调用服务器、更新 localStorage 和更改您的 UI 定期从客户端重新检查当前用户的授权。 4) 理想情况下，这些变化很少发生。 5）缓存持续时间是您可以允许用户从管理员更改为非管理员或有效更改为撤销的时间。 6）考虑创建一个授权属性，您可以在控制器类级别应用来处理“管理”功能并支付检查每个调用的代价。

【参考方案1】：

JWT 中的令牌被设计为不能被任何人修改（令牌的内容与其签名不匹配），如果权限发生变化，例如通过获取管理员权限，后端需要提供新的令牌。

关于安全性：您应该始终让后端检查 jwt 令牌，并通过令牌中提供的信息（例如角色或权限）允许用户执行特定操作。

显示或隐藏管理页面只是一种用户服务，而不是安全概念。这样，某人可以更改他们喜欢的 localStorage 并可能查看管理页面，但实际上无法在后端系统中执行任何与管理相关的操作。