我可以在哪里将 JWT 令牌存储在 React js 中以验证应用程序后端的各种路由？

Posted 2023-03-08

【中文标题】我可以在哪里将 JWT 令牌存储在 React js 中以验证应用程序后端的各种路由？

【英文标题】：Where I can store JWT token in React js for authenticate the various routes on back end of app?

【发布时间】：2020-08-04 22:00:06

【问题描述】：

我正在使用 JWT 令牌进行身份验证和授权。登录后我想将令牌的值存储在前端（React js）中，以便我们可以在服务器上发送令牌以根据节点 js 验证不同的路由来自 React js 中不同组件的不同 api 调用。我在 React js 中创建应用程序。出于安全考虑，我不想存储在本地存储或 cookie 中。告诉我更好的存储方式。

【参考方案1】：

您所面临的安全问题将适用于您需要保留令牌的任何情况。

推荐的方式是使用httpOnly cookie，这个cookie不能被javascript访问并且你不需要担心在每个请求中发送token，这个cookie是当前维护会话的“安全”选项在网络应用程序中。

另一方面，你仍然可以在 localStorage 中使用 JWT，但是是的，在 XSS 攻击可以被窃取的情况下，但是让我们谈谈安全性，如果有人可以注入 JS 代码，他们仍然可以做任何事情该会话，与 httpOnly cookie 的唯一区别是，他无法保存凭据以供以后使用或从另一台计算机使用它（当然，这使黑客更难做任何事情，但你仍然可以做任何事情） .

在使用联合身份验证的情况下需要 JWT，即使这样，如果 JWT 被盗，是因为第三方已经可以访问 JS 运行时，所以重要的不是“获取令牌被盗”，不允许在您的应用中运行外部代码。

【讨论】：

我们如何将令牌存储在 Http cookie 中？您能否详细说明或提供一些实现细节。实际上，我在标头中发送 JWT 以进行身份​​验证路由。

如果你使用 cookie，你不使用令牌，因为如果它是 httpOnly 就无法读取 cookie，cookie 会掉落到你的浏览器，并且每次你发出请求后端，请求会自动将cookie传递给服务器。此外，如果您使用 JWT，也可以，安全性稍差一些，但老实说与此无关，只需确保请求是由 https 发出的。如果有人能够窃取 JWT，那就是威胁，此时您是否使用 cookie 并不重要。