Angular如何追踪浏览器刷新/重加载前时间以实现短时间登录态保留

核心逻辑说明 #

不需要追求完全精准的浏览器刷新触发时间，通过记录页面最后一次正常活跃的时间，配合本地存储做时间差校验即可实现需求。beforeunload事件是浏览器暴露的最接近页面刷新/关闭动作的触发节点，可基于此实现核心逻辑。

具体实现步骤 #

• 监听页面卸载事件记录时间戳
  在Angular根组件（如AppComponent）的初始化钩子中注册beforeunload事件，事件触发时将当前时间写入本地存储：

  ngOnInit(): void {
    // 页面即将卸载时记录最后活跃时间
    window.addEventListener('beforeunload', () => {
      localStorage.setItem('lastAppActiveTime', Date.now().toString());
      // 可同步将加密后的登录态写入本地存储
    });
  }
  

• 应用初始化时校验时间间隔
  应用启动时读取本地存储的时间戳，和当前时间做差值计算，符合阈值要求则直接恢复登录态：

  const lastActiveTime = localStorage.getItem('lastAppActiveTime');
  const RETENTION_VALID_MS = 10 * 1000; // 10秒有效期
  
  if (lastActiveTime) {
    const timeDiff = Date.now() - parseInt(lastActiveTime);
    if (timeDiff < RETENTION_VALID_MS) {
      // 时间校验通过，读取存储的加密登录态恢复登录
      const savedLoginInfo = localStorage.getItem('encryptedLoginInfo');
      if (savedLoginInfo) {
        // 调用自身业务的登录态恢复逻辑即可
      }
    } else {
      // 超过有效期，清除所有旧存储数据
      localStorage.removeItem('lastAppActiveTime');
      localStorage.removeItem('encryptedLoginInfo');
    }
  }
  

• 兼容异常场景优化
  针对浏览器崩溃、进程强制结束等无法触发beforeunload的场景，可新增定时心跳更新活跃时间，保证记录的时间和实际卸载时间差值不会过大：

  // 每2秒更新一次活跃时间，异常场景下时间误差最多2秒，不影响10秒阈值的校验
  setInterval(() => {
    localStorage.setItem('lastAppActiveTime', Date.now().toString());
  }, 2000);
  

注意事项 #

• 敏感登录信息不要明文存入本地存储，需做对称加密处理，降低XSS泄露风险
• beforeunload事件中不要执行耗时同步操作，避免阻塞页面正常卸载

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