如何在刷新页面时使用存储在本地存储中的reactjs中的JWT进行验证？

Question

我把我的用户登录状态存储在状态中，当我刷新页面时，状态初始化，jwt token在localstorage中，现在，我的应用程序显示用户未登录，但当提出请求时，它从localstorage中获取jwt token并完成受保护的请求，我想在刷新页面时更新我的状态。

我想在刷新页面时更新我的状态，请告诉我解决方案。https:/codesandbox.iosreact-library-fe-7p8rf

Answer 1

你代码中的问题是你没有像存储jwt那样存储userData，这就是为什么 if (user.isLoggedIn) { 在你 UserComponent 刷新后总是会给你false，请尝试在你的 Login 组成部分

localStorage.setItem("currentUser", JSON.stringify(res.user));

并在你的userContext中更新你的initialState。

const initialState = {
   isLoggedIn: localStorage.getItem("jwt") ? true : false,
   userData: localStorage.getItem("currentUser")
       ? JSON.parse(localStorage.getItem("currentUser"))
       : "undefined"
};

你也可以尝试解析jwt标记来提取用户数据（数据可能和你想要的userData对象不一样）。

const token = localStorage.getItem("jwt");
const userData = JSON.parse(atob(token.split(".")[1]));

即便如此，你也应该创建一个web服务来验证更新你的jwt，因为一旦你的token过期，你就无法从任何web服务中获得任何响应。

Answer 2

我也有同样的问题，我是这样做的。

1. 我在我的 api sever 中创建了一个路由，用于验证 token 并返回用户对象，例如：我在我的 react app 中创建了一个名为 validateToken 的动作，在该路由中，我从 localstorage 获取 token 并将其发送到 sever。/auth/validate
2. 我在我的react应用中创建了一个名为validateToken的动作，在这个路由中，我从localstorage中获取token，并将其发送到sever。/auth/validate 并将服务器返回的用户存储在我的状态中。
3. 在App组件中，我在 useEffect() 的 componentDidMount()

因此，一旦页面被重新加载，应用程序就会用本地存储的jwt token向服务器发送请求，然后服务器返回用户对象，你也可以在发送请求时显示加载器:)

Answer 3

当用户刷新页面时，你可以通过这种方式更新你的状态。

// UserContext.js

case "SET_USER":
      return { ...state, isLoggedIn: localStorage.getItem("jwt") ? true : false };

Answer 4

在useEffect中获取登录凭证，并将loginUser数据设置为你的状态。

useEffect(() => {
   let loginUser= window.localStorage.setItem("jwt", res.jwt);
  });