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

我目前正在学习使用.NETCore和React开发一个简单的web应用程序来进行身份验证和授权。我的后端使用jwt设置了一系列受保护的路由。现在，在登录之后，我获得一个访问令牌、一个刷新令牌和当前用户角色，并将它们存储在cookie中。这很好，但是，如果用户要编辑他的角色，比如说Admin，我会遇到一些问题。他仍然无法访问管理员端点，因为服务器从访问令牌获取实际角色，但呈现了管理员用户界面。令牌本身也有一个类似的问题，在我当前的实现中，如果cookie没有定义，那么用户就被认为是经过身份验证的，因此来宾用户可以在其中添加一些胡言乱语，还可以看到一些他不应该看到的导航组件。

---

我在网上看到很多人使用localStorage存储用户信息的例子，但我认为这会遇到同样的问题。我的主要问题是，如果这首先是一个大的安全问题（因为用户只能看到一些额外的按钮，而这些按钮在单击时什么也不做），如果是，那么解决它的好方法是什么？我正在考虑从服务器获取当前用户角色（同时验证令牌本身），但每次我想要呈现一个导航组件时，我都需要这样做，这样它听起来很笨重。

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

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

显示或隐藏管理员页面仅仅是用户服务，而不是安全概念。通过这种方式，用户可以随意更改本地存储并查看管理页面，但实际上无法在后端系统中执行任何与管理相关的操作。

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