在前端从 nodejs 管理 jwt答案

【问题标题】：Manage jwt from nodejs on front end在前端从 nodejs 管理 jwt
【发布时间】：2023-03-19 04:43:01
【问题描述】：

我有一个使用 jwt 身份验证的应用程序，所以我有一个 api /login，我在其中生成 jwt，例如：

res.cookie('Authorization', 'Bearer ' + token, {httOnly: true});

当我在前端登录时，在 react js 中，服务器会生成 jwt 令牌。
问题：

登录后如何在前端管理jwt？（现在令牌是在cookie中发送的，我无法使用javascript读取它），当我登录后转到另一条路线时，我必须从前端发回令牌，但它只在/login页面上在第二条路线。我现在可以使用 localStorage 处理令牌，但这并不安全。那么，在我的情况下，如果我在另一个页面上登录后导航，如何发回令牌？

【问题讨论】：

最好的办法是在登录后将 jwt 保存在 localstorage 上，如果有人在每个请求中获取并在 auth 标头中发送该数据以验证用户并在之后使令牌过期，则仅保存没有危害的公共数据一段时间
是什么让您认为本地存储不安全？
您的登录页面是否与您的应用程序位于不同的域中？否则，cookie 应该随每个请求一起发送，无需前端代码的任何额外工作。

标签： javascript node.js jwt

【解决方案1】：

如果您不切换域，并且 cookie 路径是全局的，那么您可以从前端的任何页面访问它。见：https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

另外，在使用 cookie 之前，我会三思而后行。我建议在localStorage 中使用带有refreshTokens（30 分钟）的短期令牌（30 分钟），并使用标准的Authorization 标头发送它们，而不必担心有人窃取它们。（只是不要在那里存储敏感数据）。在时间用完之前，刷新令牌将定期需要一对新的令牌/刷新。

还有sessionStorage，如果您不想长时间保存数据：https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage，其中每个选项卡/窗口都有单独的sessionStorage。

【讨论】：