时间戳

首页 > 解决方案 > 如何检查 localStorage 中的令牌是否有效？

javascript - 如何检查 localStorage 中的令牌是否有效？

问题描述

我正在将 ReactJS 前端与 PHP 后端连接起来。登录时，我将 JWT 令牌保存在 localStorage 中，我有一些静态反应页面，我只想在用户登录时显示它们我已将它们包装在受保护的路由中。我知道当我们从后端 api 提取数据时，我们可以授权用户，但在这种情况下，我如何授权用户，如果用户添加了错误的令牌，静态页面仍然可以访问。下面是我的受保护路线的代码

 <Route
      {...rest}
      component={(props) => {
        const token = window.localStorage.getItem("token");
        if (token) {
          return <Component {...props} />;
        } else {
          return <Redirect to={"/"} />;
        }
      }}
    />

标签： javascriptphpreactjsreact-reduxfrontend

解决方案

您需要执行以下代码来保护页面

  • 在 redux 或 localstorage 中添加令牌
  • 刷新时，调用 api 并将令牌发送到将验证您的令牌的服务器
  • 如果验证，那么您可以显示受保护的页面，否则重定向到登录
  • 在服务器端制作将检查请求是否具有令牌及其有效的中间件
  • 如果无效，则发送未经授权的响应，如果您正在使用 axios，您可以使用 axios 拦截该响应。或者在 reactjs 中创建响应的中间件

我认为这可以解决您验证用户的问题

推荐阅读