Vue多标签页登录状态问题：关闭单标签导致全局登出

核心逻辑 #

不能直接在单个标签页关闭时清除localStorage，而是通过追踪全局标签页数量，仅当最后一个标签页关闭时才清除持久化的Token。同时结合sessionStorage维持单个标签页的独立登录状态，避免跨标签页的状态干扰。

具体实现步骤 #

1. 登录时的Token存储与计数初始化 #

登录成功后，同时将Token存入localStorage（支持新标签页免登）和sessionStorage（维持当前标签页会话），并初始化全局标签页计数：

// 登录成功回调
function loginSuccess(token) {
  localStorage.setItem('Token', token);
  sessionStorage.setItem('Token', token);
  
  // 更新全局标签页计数
  let tabCount = parseInt(localStorage.getItem('tabCount')) || 0;
  localStorage.setItem('tabCount', tabCount + 1);
}

2. 监听标签页的打开/关闭事件 #

在全局入口（比如main.js或App.vue的created钩子）添加以下监听，同步标签页计数并判断是否为最后一个关闭的标签：

// 跨标签页同步计数：其他标签修改localStorage时触发
window.addEventListener('storage', (e) => {
  if (e.key === 'tabCount') {
    localStorage.setItem('tabCount', e.newValue);
  }
});

// 标签页关闭时更新计数，判断是否清除Token
window.addEventListener('beforeunload', () => {
  let tabCount = parseInt(localStorage.getItem('tabCount')) || 1;
  tabCount -= 1;

  if (tabCount <= 0) {
    // 最后一个标签页关闭，清除持久化Token和计数
    localStorage.removeItem('Token');
    localStorage.removeItem('tabCount');
  } else {
    localStorage.setItem('tabCount', tabCount);
  }
});

// 页面加载（含刷新）时，确保计数正确
window.addEventListener('load', () => {
  let tabCount = parseInt(localStorage.getItem('tabCount')) || 0;
  localStorage.setItem('tabCount', tabCount + 1);
});

3. 优化路由守卫逻辑 #

优先使用sessionStorage的Token维持当前页状态，避免其他标签页操作影响当前会话：

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    const sessionToken = sessionStorage.getItem('Token') || '';
    const localToken = localStorage.getItem('Token') || '';

    if (sessionToken || localToken) {
      // 新标签页打开时，同步localStorage的Token到sessionStorage
      if (!sessionToken && localToken) {
        sessionStorage.setItem('Token', localToken);
      }
      return next();
    } else {
      next({ path: '/login' });
    }
  } else {
    next();
  }
});

4. 主动登出的处理逻辑 #

主动登出时，清除所有存储的Token并重置计数：

function logout() {
  localStorage.removeItem('Token');
  localStorage.removeItem('tabCount');
  sessionStorage.removeItem('Token');
  router.push('/login');
}

关键说明 #

• 全局计数tabCount：通过localStorage共享，每个标签页打开时+1、关闭时-1，只有计数归0时才清除持久化Token。
• sessionStorage的作用：为每个标签页维护独立的会话Token，避免单个标签页关闭时影响其他标签的登录状态。
• storage事件：实现跨标签页的计数同步，确保多标签场景下计数准确。

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