React实现登录后定时触发重新认证的解决方案咨询

核心思路是把登录时间、重新认证过期时间存入localStorage，通过页面初始化校验+定时器的组合方式实现，这样页面刷新后逻辑不会丢失。

具体实现步骤 #

1. 登录时存储时间信息 #

登录成功后，除了accessToken，同步存入登录时间戳和1小时后的过期时间戳：

// 登录成功执行逻辑
const loginTime = Date.now();
const reAuthExpireTime = loginTime + 60 * 60 * 1000; // 1小时后触发重新认证

localStorage.setItem('accessToken', '你的token值');
localStorage.setItem('loginTime', loginTime.toString());
localStorage.setItem('reAuthExpireTime', reAuthExpireTime.toString());

2. 页面初始化时校验并设置定时器 #

在应用根组件或首页的useEffect中，读取localStorage的时间信息，判断当前状态：

useEffect(() => {
  const expireTime = localStorage.getItem('reAuthExpireTime');
  if (!expireTime) return;

  const now = Date.now();
  const remainingTime = Number(expireTime) - now;

  let timer;
  if (remainingTime <= 0) {
    // 已过期，直接弹出重新认证模态框
    showReAuthModal();
  } else {
    // 未过期，设置定时器到点触发
    timer = setTimeout(() => {
      showReAuthModal();
    }, remainingTime);
  }

  // 组件卸载时清除定时器，避免内存泄漏
  return () => timer && clearTimeout(timer);
}, []);

3. 重新认证成功后重置计时 #

用户输入密码验证通过后，更新localStorage的时间信息，重新启动计时：

// 重新认证成功执行逻辑
const newLoginTime = Date.now();
const newExpireTime = newLoginTime + 60 * 60 * 1000;

localStorage.setItem('loginTime', newLoginTime.toString());
localStorage.setItem('reAuthExpireTime', newExpireTime.toString());

4. 登出时清理数据 #

用户主动登出时，清除localStorage相关字段和可能存在的定时器：

// 登出逻辑
localStorage.removeItem('accessToken');
localStorage.removeItem('loginTime');
localStorage.removeItem('reAuthExpireTime');
// 若有全局定时器实例，此处一并清除

额外优化建议 #

• 可以用每分钟一次的轮询替代单次setTimeout，避免系统时间变动导致的误差，轮询频率可根据需求调整。
• 在路由跳转的守卫逻辑中加入过期校验，增加触发检查的时机。

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