同一浏览器新用户登录时如何自动登出旧用户？

问题根源是localStorage为同源标签页共享资源，新标签页登录替换token后，旧标签页的存储会同步，但页面组件未及时感知身份切换，导致状态混乱。以下是具体解决方法：

1. 监听localStorage跨标签页变化 #

在全局布局或页面入口添加storage事件监听，当其他标签页修改token时，自动校验当前用户身份与新token的一致性，不一致则登出：

window.addEventListener('storage', (e) => {
  // 只监听token相关的变化
  if (e.key !== 'token') return;

  const newToken = e.newValue;
  const currentRole = localStorage.getItem('userRole');
  
  // 无新token说明是登出操作，直接跳转登录页
  if (!newToken) {
    localStorage.clear();
    window.location.href = '/login';
    return;
  }

  // 解析新token获取角色（替换成你实际的JWT解析逻辑）
  const newRole = JSON.parse(atob(newToken.split('.')[1])).role;
  
  // 当前角色与新角色不匹配，强制登出
  if (currentRole && currentRole !== newRole) {
    localStorage.clear();
    window.location.href = '/login';
  }
});

注意：需将用户角色单独存在localStorage，或从token中解析，用于身份对比。

2. 登录时主动触发跨标签页通知 #

登录成功后，除了存储token和角色，可通过临时修改localStorage触发storage事件，确保其他标签页及时感知：

// 登录成功逻辑
function handleLoginSuccess(token, role) {
  localStorage.setItem('token', token);
  localStorage.setItem('userRole', role);
  
  // 触发storage事件（当前标签页修改不会触发，通过临时键实现）
  localStorage.setItem('login_sync', Date.now().toString());
  localStorage.removeItem('login_sync');
}

3. 页面初始化时强制校验身份 #

在管理员/商户仪表盘的初始化生命周期（如React的useEffect、Vue的onMounted）中，校验当前页面角色与存储角色是否匹配，不匹配则直接登出：

// React 管理员页面示例
useEffect(() => {
  const storedRole = localStorage.getItem('userRole');
  // 当前页面预期角色为admin
  if (storedRole !== 'admin') {
    localStorage.clear();
    window.location.href = '/login';
  }
}, []);

4. 可选：优化存储策略 #

若允许同一浏览器多标签页登录不同账号，可改用sessionStorage（标签页独立存储），但此方案不符合"自动登出之前用户"的需求，仅作备选。

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