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

Question

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

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

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

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

Answer 1

使用localStorage：

只读localStorage属性允许您访问文档来源的 Storage 对象；存储的数据跨浏览器会话保存。localStorage与 类似sessionStorage，不同之处在于，虽然存储在的数据localStorage没有过期时间，但sessionStorage在页面会话结束时，即在页面关闭时，存储在的数据会被清除。

基本工作流

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

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

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

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

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

window.localStorage.removeItem('token');