Nuxt 3/Vue JS 多标签页登出异常问题求助

问题根源 #

你的代码存在几个关键问题：

• storage事件仅在修改storage的标签页以外的同源标签页触发，且只有当storage的键值发生变更时才会触发，当前判断逻辑未关联token的storage变更动作
• Nuxt3中不能直接在普通监听函数里使用redirect，需通过路由器实例完成导航
• 其他标签页的store状态未与storage同步，导致判断条件失效

修正后的实现方案 #

1. 在布局组件中正确监听storage并处理导航 #

<script setup>
const store = useStore()
const router = useRouter()

onMounted(() => {
  window.addEventListener('storage', handleStorageChange)
})

onUnmounted(() => {
  window.removeEventListener('storage', handleStorageChange)
})

function handleStorageChange(event) {
  // 只监听token对应的storage键（假设你的token存在localStorage的'user-token'键下）
  if (event.key === 'user-token') {
    // 同步store的token状态
    const newToken = event.newValue
    store.commit('user/SET_TOKEN', newToken)
    
    // 如果token被清除，跳转登录页
    if (!newToken) {
      router.replace('/sign-in')
    }
  }
}
</script>

2. 确保登出时同步更新storage和store #

登出逻辑里要同时清除localStorage的token并更新store状态，这样才能触发其他标签页的storage事件：

// 登出方法示例
function logout() {
  // 清除localStorage的token
  localStorage.removeItem('user-token')
  // 更新store状态
  store.commit('user/SET_TOKEN', null)
  // 当前标签页跳转登录页
  router.replace('/sign-in')
}

3. 额外优化：页面加载时校验token有效性 #

在布局组件的onMounted里添加一次校验，防止用户直接打开新标签页时token已失效：

onMounted(() => {
  window.addEventListener('storage', handleStorageChange)
  
  // 页面加载时校验token
  const storedToken = localStorage.getItem('user-token')
  if (!storedToken && store.state.user.token) {
    store.commit('user/SET_TOKEN', null)
    router.replace('/sign-in')
  }
})

关键注意事项 #

• 所有操作token的场景都要同时同步localStorage和store，避免状态不一致
• storage事件无法跨域触发，仅对同源标签页/窗口生效
• 使用router.replace而非push，避免登录页出现在浏览器历史栈中

内容的提问来源于stack exchange，提问作者Muhammad Waqar Anwar