React中JWT令牌未按时失效问题排查与解决方案问询

核心问题分析 #

你遇到的情况是典型的前端未做JWT过期校验导致的：

• JWT的expiresIn设置仅会让令牌本身携带过期时间，前端不会自动拦截过期令牌的路由访问，也不会主动移除本地存储里的过期令牌。
• 即便令牌过期，只要前端路由守卫没有校验逻辑，用户就能直接进入受保护页面，只是后续接口请求会被服务端拒绝（如果服务端做了校验的话）。

必须在客户端添加校验逻辑吗？ #

是的，客户端需要添加两层校验来优化体验：

1. 路由层面校验：在进入受保护路由前，检查令牌是否有效（存在且未过期）
2. 请求层面校验：发起接口请求前，先校验令牌，无效则直接跳转到登录页

实现客户端JWT过期校验 #

1. 正确使用jwt_decode校验令牌 #

先确保安装了正确的依赖：

npm install jwt-decode

然后编写通用的校验函数：

import jwtDecode from 'jwt-decode';

// 校验令牌是否有效（存在且未过期）
export const isTokenValid = () => {
  const token = localStorage.getItem('token');
  if (!token) return false;

  try {
    const decodedToken = jwtDecode(token);
    // JWT的exp是秒级时间戳，转成毫秒后和当前时间比较
    const isExpired = decodedToken.exp * 1000 < Date.now();
    
    if (isExpired) {
      localStorage.removeItem('token'); // 移除过期令牌
      return false;
    }
    return true;
  } catch (error) {
    // 解码失败（令牌非法、格式错误等），直接清除令牌
    localStorage.removeItem('token');
    return false;
  }
};

2. React路由守卫实现（以React Router v6为例） #

用自定义组件包裹受保护路由，实现拦截：

import { Navigate, Outlet } from 'react-router-dom';
import { isTokenValid } from './utils';

const ProtectedRoute = () => {
  const valid = isTokenValid();
  // 令牌有效则渲染子路由，否则跳登录页
  return valid ? <Outlet /> : <Navigate to="/login" replace />;
};

// 路由配置示例
const router = createBrowserRouter([
  {
    path: '/',
    element: <ProtectedRoute />,
    children: [
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'profile', element: <Profile /> }
    ]
  },
  { path: '/login', element: <Login /> }
]);

3. 解决jwt_decode未知错误 #

常见错误原因及修复：

• 令牌为空或格式错误：确保解码前先判断令牌是否存在，空令牌直接返回无效
• 依赖版本问题：卸载旧版本后重装最新版：npm uninstall jwt-decode && npm install jwt-decode
• 模块导入问题：如果是CommonJS环境，使用const jwtDecode = require('jwt-decode');
• 令牌被篡改：解码失败时直接清除本地存储的令牌，避免重复报错

额外注意事项 #

• 服务端校验不可少：客户端校验只是提升用户体验，服务端必须在接口请求时严格校验JWT的签名和过期时间，防止恶意篡改客户端逻辑绕过校验
• 令牌刷新机制：如果业务需要，可实现刷新令牌逻辑，在令牌即将过期时自动获取新令牌，避免用户频繁登录
• 定时器提示：可以设置定时器，在令牌过期前5分钟提示用户“登录即将过期”，提升体验

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