ReactJS单页登录应用：Token过期时间存储方案咨询

嘿，这个问题在React开发带登录功能的SPA时真的挺常见的，咱们来聊聊你的方案和优化方向~

首先明确说：你的方案完全可行，但确实可以通过一些手段解决代码冗余和潜在的性能顾虑，咱们一步步拆解：

为什么你的思路没问题？ #

• 选择localStorage存储Token和过期时间是合理的：如果产品需要「记住登录状态」（用户关闭浏览器再打开仍保持登录），localStorage就是正确的选择；如果是「关闭浏览器即退出」的场景，才需要考虑sessionStorage。
• 关于性能：检查过期时间本质就是拿当前时间和存储的过期时间做一个简单的数值比对，这种操作的耗时微乎其微，完全不用担心性能问题。

怎么解决代码冗余的问题？ #

你提到的“每次事件触发都写检查逻辑”确实会导致冗余，这里有几个优雅的优化方式：

1. 封装成自定义Hook #

把Token检查、过期判断、更新逻辑封装成一个可复用的自定义Hook，比如useAuth：

import { useEffect, useState } from 'react';

export const useAuth = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const checkTokenExpiry = () => {
    const authData = JSON.parse(localStorage.getItem('auth'));
    if (!authData || !authData.token || Date.now() > authData.expiresAt) {
      localStorage.removeItem('auth');
      setIsAuthenticated(false);
      // 这里可以添加跳转到登录页的逻辑
      return false;
    }
    setIsAuthenticated(true);
    return true;
  };

  // 组件挂载时自动检查
  useEffect(() => {
    checkTokenExpiry();
  }, []);

  // 提供给外部调用的检查方法
  return { isAuthenticated, checkTokenExpiry };
};

之后在需要的组件里直接调用这个Hook就行，不用重复写检查逻辑。

2. 全局拦截器统一处理 #

如果你的项目用了Axios这类HTTP库，可以在请求拦截器里统一检查Token过期：

import axios from 'axios';

axios.interceptors.request.use(
  (config) => {
    const authData = JSON.parse(localStorage.getItem('auth'));
    if (authData && Date.now() > authData.expiresAt) {
      // Token过期，清除存储并跳转登录
      localStorage.removeItem('auth');
      window.location.href = '/login';
      return Promise.reject(new Error('Token expired'));
    }
    // 把Token加到请求头
    config.headers.Authorization = `Bearer ${authData?.token}`;
    return config;
  },
  (error) => Promise.reject(error)
);

这样所有API请求前都会自动检查，不用在每个请求的地方手动处理。

3. 结合React Context做全局状态管理 #

把认证状态（包括Token、过期时间）放到React Context中，在Context的Provider里统一处理过期检查，比如监听路由跳转、页面可见性变化等全局事件，自动触发检查，让所有组件都能共享认证状态，不用各自单独处理。

额外的优化建议 #

• 存储时把Token和过期时间放在同一个对象里：比如localStorage.setItem('auth', JSON.stringify({ token: 'xxx', expiresAt: Date.now() + 3600 * 1000 }))，这样读取时一次就能拿到所有数据，更高效。
• 提前刷新Token：可以在Token快过期前（比如剩余5分钟）自动调用刷新Token的接口，更新localStorage里的Token和过期时间，提升用户体验，不用等到过期才跳登录。
• 处理页面休眠的情况：如果用户长时间把页面放在后台，定时器可能会延迟，这时候可以监听visibilitychange事件，当页面重新可见时触发一次Token检查。

总的来说，你的核心思路是正确的，只要通过封装、全局拦截等方式复用逻辑，就不会出现代码冗余的问题，性能也完全不用担心。

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