React.js中如何实现关闭浏览器标签页时触发会话超时？

一、关闭标签页后会话失效的实现方案 #

你之前用window.onbeforeunload的思路不可靠——浏览器对这个事件里的同步操作限制多，且刷新页面也会触发该事件，没法精准区分关闭标签和刷新。推荐结合sessionStorage和时间戳实现：

• 页面加载时，检查sessionStorage中的会话激活标记（如isSessionActive）和最后活动时间lastActiveTime：
  • 若没有这两个值，直接重定向到登录页；
  • 若存在，计算当前时间与lastActiveTime的差值，超过10分钟则清除sessionStorage并跳转登录。
• 用户有鼠标/键盘活动时，更新sessionStorage.setItem('lastActiveTime', Date.now())，同时确保isSessionActive设为true。
• 由于sessionStorage的生命周期和标签页绑定，关闭标签后数据会自动清除，次日打开网站时sessionStorage为空，自然触发登录跳转。

示例代码：

// 页面加载时执行
window.addEventListener('load', () => {
  const isSessionActive = sessionStorage.getItem('isSessionActive');
  const lastActiveTime = sessionStorage.getItem('lastActiveTime');
  const timeoutLimit = 10 * 60 * 1000; // 10分钟毫秒数

  if (!isSessionActive || !lastActiveTime) {
    window.location.href = '/login';
    return;
  }

  if (Date.now() - parseInt(lastActiveTime) > timeoutLimit) {
    sessionStorage.clear();
    window.location.href = '/login';
    return;
  }

  // 绑定活动监听，更新最后活动时间
  const updateActiveTime = () => {
    sessionStorage.setItem('lastActiveTime', Date.now());
  };
  window.addEventListener('mousemove', updateActiveTime);
  window.addEventListener('keydown', updateActiveTime);
});

二、AWS Cognito Auth模块导入错误修复 #

你遇到的“unfound module named Auth in the aws-amplify module”问题，大概率是AWS Amplify版本更新导致的导入路径变化：

• 若使用Amplify v6及以上版本，Auth模块的导入路径已变更，需从aws-amplify/auth导入：

  import { Auth } from 'aws-amplify/auth';
  

• 若使用v5及以下版本，才从根模块导入：

  import { Auth } from 'aws-amplify';
  

• 检查package.json中aws-amplify的版本号，若版本>=6.x，必须使用新的导入路径。同时确保依赖已正确安装，执行：

  npm install aws-amplify
  

另外，修改Cognito令牌过期时间后，要确保前端代码正确处理令牌过期回调，比如监听令牌刷新失败事件自动跳转登录：

Auth.events.on('tokenRefreshFailure', () => {
  window.location.href = '/login';
});

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