如何在电脑休眠时通过Web Worker确保用户登出

核心思路：放弃依赖前端计时器的连续运行 #

系统休眠时包括Web Worker在内的所有前端进程都会暂停，固定时长的setTimeout/setInterval无法保证精准触发。可靠的方案是基于用户最后操作的时间戳差值判断，同时配合服务器端的会话安全控制。

前端实现方案 #

1. 记录用户最后操作时间戳
   监听用户的交互事件，每次操作时更新本地存储的时间戳：

   const updateLastActive = () => {
     localStorage.setItem('lastActiveTime', Date.now().toString());
   };
   
   // 监听常见交互事件
   ['click', 'keydown', 'mousemove', 'scroll', 'touchstart'].forEach(event => {
     document.addEventListener(event, updateLastActive, { passive: true });
   });
   

2. 页面唤醒时主动检查
   通过visibilitychange事件捕获页面从休眠/后台回到前台的动作，立即校验时间差：

   document.addEventListener('visibilitychange', () => {
     if (!document.hidden) {
       const lastActive = parseInt(localStorage.getItem('lastActiveTime') || Date.now(), 10);
       const idleDuration = Date.now() - lastActive;
       // 10分钟 = 600000毫秒
       if (idleDuration > 600000) {
         // 执行登出逻辑
         logout();
       }
     }
   });
   

3. 定期兜底检查
   用定时器（主线程或Web Worker均可）每隔一段时间校验一次，覆盖页面持续前台但用户无操作的场景：

   // 主线程示例，也可迁移到Web Worker中
   setInterval(() => {
     const lastActive = parseInt(localStorage.getItem('lastActiveTime') || Date.now(), 10);
     if (Date.now() - lastActive > 600000) {
       logout();
     }
   }, 30000); // 每30秒检查一次
   

服务器端安全保障（必做） #

前端的自动登出只是体验优化，真正的会话安全必须由服务器控制：

• 给服务器会话设置10分钟的过期时间，从用户最后一次请求开始重新计时。
• 前端每次发起请求时，服务器优先校验会话状态，若已过期则返回401/403状态码，前端收到后立即触发登出流程。
• 可选：设置心跳请求（如每5分钟发送一次空请求），维持会话活跃，但用户休眠后心跳中断，服务器会话会自然过期，唤醒后的首次请求将被拦截。

登出逻辑示例 #

function logout() {
  // 清理本地存储
  localStorage.removeItem('lastActiveTime');
  // 清除前端会话信息（如token）
  sessionStorage.removeItem('authToken');
  // 跳转到登录页或执行后端登出接口
  window.location.href = '/login';
}

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