从多页应用程序进行身份验证后，如何在初始下载期间将 JWT 令牌加载到 React？

Posted 2023-03-10

【中文标题】从多页应用程序进行身份验证后，如何在初始下载期间将 JWT 令牌加载到 React？

【英文标题】：How to load JWT token on to React during initial download after authentication from Multi Page Application?

【发布时间】：2018-12-20 04:16:18

【问题描述】：

我创建了需要身份验证的多页面应用程序和单页面应用程序的组合。应用栈如下。

Node 和 Express 用于后端和多页应用程序 React、React Router 和 Redux 用于单页应用程序 用于授权的 JWT 令牌。

我有一个无 React 登录页面，用于验证电子邮件和密码、生成 JWT 令牌并重定向到 React 应用程序。

我想在客户端首次加载反应应用程序时将该令牌保存到反应应用程序中。但我不知道该怎么做。如何做到这一点？

【参考方案1】：

使用localStorage:

只读的localStorage 属性允许您访问存储 文件来源的对象；存储的数据保存在 浏览器会话。 localStorage 类似于 sessionStorage，除了 虽然存储在localStorage 中的数据没有过期时间，但数据 当页面会话结束时，存储在sessionStorage 中的内容会被清除— 即页面关闭时。

---

基本工作流程

当用户登录时，您需要将令牌保存在客户端本地存储中：

window.localStorage.setItem('token', '2132434knfaskjdafnalenjgralejvnafjvk');

然后，当用户重新加载页面时，您会希望从 localStorage 中获取它：

const jwt = window.localStorage.getItem('token');

最后，当用户注销时，我们将从用户存储中删除 JWT：

window.localStorage.removeItem('token');

【讨论】：

但是你怎么设置：window.localStorage.setItem('token', '2132434knfaskjdafnalenjgralejvnafjvk'); 当你同时下载react app的时候。谢谢你的回答。

你没有，你在用户登录时设置它。访问您网站的用户不是登录用户。通常，这涉及登录表单

@InfiniteDev 您将在我的回答中的第一个和第二个示例之后设置标题。因此，一旦用户登录并保存了令牌，请在请求的标头上设置令牌

啊哈，我明白了混淆在哪里。如果您在响应标头中有 JWT，那么您所要做的就是将它（当用户重定向回您的应用程序时）保存到本地存储中。然后，每当用户进入您的网站（第一次加载）时，在 javascript 中检查令牌是否存在于 localStorage 中，如果存在，请将其重新添加到您的请求标头中。

你很聪明。谢谢

【参考方案2】：

我建议您将 jwt 存储在安全且仅限 http 的 cookie 中。这比本地存储安全得多。通过这种方式，您可以保护您的应用程序免受 XSS 攻击。如果你有 ssl，那么 jwt 劫持就会很困难。

在本地存储中保存 jwt 使其可用于 XSS 攻击。只需在后端的响应中设置 cookie。

例如：

res.cookie('jwt-token' , 'httpOnly': true , path:'path' , secure: true , maxAge: someNumber)

【讨论】：

将其保存到 cookie 也会使其容易受到 XSS 攻击，如果它不适用于 javascript，您希望前端从哪里提取它？

浏览器会在每次请求中向服务器发送cookie。 cookie 将有 jwt。

这没有回答我原来的问题，问题仍然存在。