Node.js 从多页应用程序进行身份验证后，如何在初始下载期间加载JWT令牌以作出反应？

我创建了多页应用程序和单页应用程序的混合，它们需要身份验证。应用程序堆栈如下所示

• 用于后端和多页应用程序的节点和Express
• 针对单页应用程序的React、React路由器和Redux
• 用于授权的JWT令牌

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

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

使用： 只读

localStorage

属性允许您访问存储 对象作为文档的来源；存储的数据保存在不同的位置 浏览器会话

localStorage

类似于

sessionStorage

，除了 虽然存储在

localStorage

中的数据没有过期时间，但是 存储在

sessionStorage

中的内容在页面会话结束时被清除- 也就是说，当页面关闭时

---

基本流量 当用户登录时，您将希望将令牌保存在客户端本地存储上：

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

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

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

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

window.localStorage.removeItem('token');

---

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

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

例如：

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

---

但是如何设置：

window.localStorage.setItem（'token'，'2132434knfaskjdafnalenjgralejvnafjvk'）当您同时下载react应用程序时。谢谢你的回答。你不需要，你可以在用户登录时设置。访问您的站点的用户不是登录用户。通常，这涉及到登录form@InfiniteDev您可以在我的答案中的第一个和第二个示例之后设置标题。因此，一旦用户登录，并且您保存了令牌，就在requestAhhh的头上设置令牌，我看到了混淆的地方。如果您在响应头中有JWT，那么您所要做的就是将其保存（当然，当用户被重定向回您的应用程序时）到本地存储中。然后，每当用户进入您的站点（第一次加载）时，用javascript检查本地存储中是否存在令牌，如果存在，则将其重新添加到您的请求头中。您非常聪明。谢谢将其保存到cookie中也会使其易受XSS攻击，如果javascript无法使用它，您希望前端将其从何处提取？浏览器将在每个请求中向服务器发送cookie。cookie将有jwt。这并没有回答我最初的问题，问题仍然存在。