JWT基于角色的授权react js

Question

我将JWT存储在localStorage中，假设我的JWT是

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiVVNFUIsImlhdCI6MTY2MjU1NzE3Mn0.lRbHWxk8kSnTH8Okdko3cK8Nkce-0sNSeTNjQa1m33o

有效载荷与类似

{
"role": "USER",
"iat": 1662557172
}

在我的前端，我有一个受保护的路由，它解码JWT，然后测试角色像这个

if (jwt_decode(auth.user).role!=="ADMIN") {
return <Navigate to="/home" />
}
return children

我的问题是，如果用户手动创建一个新的令牌，并将角色设置为"；ADMIN"。

他将无法执行我所知道的任何API，因为他创建的令牌是无效的，但他将能够输入ADMIN路由。

有办法防止这种情况发生吗？

Answer 1

一旦您的应用程序从您使用的任何身份提供商(例如Azure AD(接收到JWT，您就应该验证颁发者。这确保了用户不能生成自己的JWT，它只能来自您信任的颁发者。

如何验证来自不同发行商的jwt代币

然后，您应该将JWT存储在本地存储中，并调用您编写的API来检查它，并返回一个结构良好的响应，该响应可以向您的应用程序指示用户的权限。这个API肯定也应该验证发布者。

为了让JWT更加安全，你可以做的是，一旦你从身份提供商那里收到JWT，就生成你自己的JWT并加密它。这将确保用户无法解密它们，因为他们没有你的私钥。