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

Posted 2023-03-10

【中文标题】如何在刷新页面上存储在本地存储中的 reactjs 中使用 JWT 进行身份验证？

【英文标题】：How to authenticate using JWT in reactjs stored in localstorage on refresh page?

【发布时间】：2020-08-25 05:18:09

【问题描述】：

我已将我的用户登录状态存储在 state 中。当我刷新页面时，状态已初始化且 jwt 令牌位于 localstorage.now 中，我的应用程序显示用户未登录，但是当发出请求时，它会从 localstorage 获取 jwt 令牌并完成受保护的请求。

我想在刷新页面时更新我的​​状态。让知道解决方案。 我的整个项目 -https://codesandbox.io/s/react-library-fe-7p8rf

【参考方案1】：

您的代码中的问题是您没有像为 jwt 那样存储 userData，这就是为什么 if (user.isLoggedIn) 在您的 UserComponent 刷新后总是会给您 false，尝试将用户数据设置为 localstorage 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]));

即便如此，您也应该创建一个网络服务来验证/刷新您的 jwt，因为一旦您的令牌过期，您将无法从任何网络服务获得任何响应。

【讨论】：

我喜欢这样做。但我在堆栈溢出中声明，因此我的投票未被考虑

我想你现在可以***.com/help/privileges/vote-up

【参考方案2】：

我有同样的问题，这就是我所做的，

我在我的 api 服务器中创建了一个路由，它验证令牌并返回用户对象，例如：/auth/validate 我在我的 react 应用程序中创建了一个名为 validateToken 的操作，在该路由中，我从 localstorage 获取令牌并将其发送到服务器 /auth/validate 并将服务器返回的用户存储在我的状态中。 在 App 组件中，我在 useEffect() 的 componentDidMount() 中调用该函数

因此，一旦页面重新加载，应用程序将使用本地存储的 jwt 令牌将请求发送到服务器，服务器返回用户对象。 您还可以在发送请求时显示加载程序:)

【参考方案3】：

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

// UserContext.js

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

【参考方案4】：

在 useEffect 中获取登录凭据并将 loginUser 数据设置为您的状态

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