React JWT未登录重定向实现 适配react-router-dom@5.1.2业务场景

令牌存储方案选择 #

• 安全优先场景：优先选择带httpOnly+secure+SameSite属性的Cookie存储令牌，这种方式可以避免XSS攻击窃取令牌，后端直接在响应头设置Cookie即可，前端不需要手动操作存储，令牌会自动随请求携带。如果用这种方案，前端不需要读取令牌内容，有效性校验完全依赖后端接口返回的状态码即可。
• 如果业务没有强安全要求、或者需要前端手动读取令牌做逻辑判断，localStorage仍然是可用方案，只要做好前端XSS防护即可，不存在完全不能用的问题。

核心实现逻辑（适配react-router-dom@5.1.2） #

你当前的问题核心不是存储位置，而是没有做全局路由拦截和令牌有效性校验，要实现任意场景下过期自动重定向，按照下面步骤修改即可：

1. 封装私有路由组件 #

单独封装PrivateRoute组件做全局路由守卫，代替你现在直接在App.js里写判断的逻辑：

// PrivateRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

// 校验令牌是否有效的工具函数，根据你业务实际情况修改逻辑
export const isTokenValid = () => {
  const user = localStorage.getItem('__user');
  if (!user) return false;
  const parsedUser = JSON.parse(user);
  // 这里补充令牌过期判断：比如当前时间是否大于后端返回的过期时间字段
  const now = Date.now();
  return parsedUser.expireTime > now;
}

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props =>
        isTokenValid() ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login-register",
              state: { msg: "登录已过期，请重新登录" }
            }}
          />
        )
      }
    />
  );
};

export default PrivateRoute;

2. 修改App.js路由配置 #

把需要登录才能访问的路由都用PrivateRoute包裹，登录页路由单独做公开路由处理：

// App.js
import PrivateRoute, { isTokenValid } from './PrivateRoute';
import LoginRegister from './你的登录组件路径';
import HomeFashion from './你的首页组件路径';

function App() {
  return (
    <div>
      {/* 公开路由：已登录用户访问登录页直接跳转首页，避免重复登录 */}
      <Route 
        path={process.env.PUBLIC_URL + "/login-register"} 
        render={props => 
          isTokenValid() ? <Redirect to="/" /> : <LoginRegister {...props} />
        }
      />
      {/* 私有路由：所有需要登录才能访问的页面都用这个组件声明 */}
      <PrivateRoute exact path="/" component={HomeFashion} />
      {/* 其他私有路由示例：<PrivateRoute path="/user-center" component={UserCenter} /> */}
    </div>
  )
}

3. 新增axios响应拦截处理接口过期 #

避免页面未刷新、路由没跳转但接口已经返回令牌过期的情况，全局拦截处理：

// 在你封装axios的公共文件中加入这段逻辑
axios.interceptors.response.use(
  response => response,
  error => {
    // 后端约定令牌过期返回401状态码，根据你的实际业务调整
    if (error.response?.status === 401) {
      localStorage.removeItem('__user');
      // 直接跳转到登录页
      window.location.href = process.env.PUBLIC_URL + "/login-register";
    }
    return Promise.reject(error);
  }
);

4. 登录组件逻辑微调 #

你现有的登录代码不需要大改，只需要注意存储用户信息时，把后端返回的令牌过期时间一起存入localStorage即可，其余逻辑保持不变。

内容的提问来源于stack exchange，提问作者Mohammad Fahad