存储在localStorage中的JWT过期状态最优检测方法

方案1：全局路由守卫校验（最适配你当前场景） #

你现在的校验逻辑只绑定了首页，只需要把校验逻辑提升到全局路由层面，所有需要登录态的路由切换时都会自动触发校验，覆盖所有入口路径：

• 如果用React Router，可以封装一个统一的鉴权路由组件，包裹所有需要鉴权的路由，示例代码：

const RequireAuth = ({ children }) => {
  const { auth } = useAuth();
  const router = useRouter();

  useEffect(() => {
    // 只要进入需要鉴权的路由，就触发校验
    if (!auth.token) {
      router.push('/auth/login');
      return;
    }
    verifyToken(auth.token).then((res) => {
      if (res.status !== 'success' && res.message === 'Token expired') {
        signoutClient(() => {
          router.push('/auth/login');
        });
      }
    });
  }, [auth.token, router]);

  return children;
}

// 路由配置时用这个组件包裹
<Route path="/helloworld" element={
  <RequireAuth>
    <HelloWorld />
  </RequireAuth>
} />

• 如果你是用的App Router模式，可以在根layout组件中添加路由变化监听，每次路径变更时触发校验即可。

方案2：本地预校验+服务端兜底 #

JWT的payload是明文存储的，你可以直接在客户端解析出token中的exp过期时间戳，提前判断是否过期，不需要每次都发请求：

const isTokenExpired = (token) => {
  if (!token) return true;
  const payload = JSON.parse(atob(token.split('.')[1]));
  // exp是秒级时间戳，要和当前毫秒级时间戳转换后对比
  return payload.exp * 1000 < Date.now();
}

注意：本地校验只能做前置拦截，不能替代服务端校验，避免客户端时间篡改、token被伪造的问题。

方案3：全局请求拦截器校验 #

给所有API请求添加请求/响应拦截器：

• 请求发起前先本地判断token是否已过期，直接拦截过期请求触发登出
• 响应拦截器统一处理服务端返回的401未授权状态，只要返回401就直接触发登出跳登录页，不管用户在哪个页面、什么时候发起的请求都能覆盖。

Socket方案评估 #

Socket方案本身可以实现，但性价比极低：为了单个token校验需求维持长连接，会额外消耗大量客户端和服务端资源，除非你的业务本身就需要Socket做实时消息推送，否则完全没必要用这个方案。

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