如何检查 localStorage 中的令牌是否有效？答案

【问题标题】：How to check the token in localStorage is valid or not?如何检查 localStorage 中的令牌是否有效？
【发布时间】：2021-06-07 13:17:02
【问题描述】：

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

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

【问题讨论】：

你不能只在前端保护任何东西。用户可以自己检查存储中的令牌值，并根据需要进行修改。
您需要使用从localStorage 检索到的令牌调用后端 API 并查看它是否有效（后端将完成验证工作）

标签： javascript php reactjs react-redux frontend

【解决方案1】：

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

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

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

【讨论】：