添加路由守卫登录态重定向逻辑后signOut跳转登录页失效如何解决

故障根因 #

你新增的路由拦截逻辑执行时机早于signOut的状态更新：调用signOut时仅删除了localStorage中的认证标识，没有同步更新Pinia store中存储的authState值。触发跳转到登录页的操作后，router.beforeEach读取到的authState仍为true，命中「已登录用户访问登录页重定向到首页」的规则，最终停留在首页，看起来就像signOut没有生效。

修复方案 #

方案1：更新signOut方法同步Pinia状态（推荐） #

在删除localStorage标识后，同步修改Pinia中的authState为未登录状态：

async signOut() {
    await auth.logout();
    await localStorage.removeItem("authenticated");
    // 新增代码：更新Pinia认证状态
    const authStore = useAuthStore();
    authStore.authState = false;
    await router.push({ name: "Login" });
  },

方案2：路由拦截时同步最新认证状态 #

如果不想修改signOut逻辑，可以在路由拦截时主动从localStorage读取最新的认证状态，避免Pinia状态和实际存储不一致：

router.beforeEach((to, from, next) => {
  const authStore = useAuthStore(router.pinia);
  // 新增代码：每次路由跳转前同步最新认证状态
  authStore.authState = !!localStorage.getItem("authenticated");
  const { authState } = authStore;
   
  if(to.path == '/login' && authState == true) {
     return next('/')
   }

  if (to.matched.some(record => record.meta.authRequired)) {
    authState
      ? next()
      : next('/login');
  } else {
    next();
  }
});

额外优化建议 #

可以在Pinia的auth store中增加初始化方法，页面加载时自动从localStorage读取认证状态，避免刷新页面后状态丢失：

// auth store 定义示例
import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    authState: false
  }),
  actions: {
    initAuth() {
      this.authState = !!localStorage.getItem('authenticated')
    }
  }
})

在项目入口文件（如main.js）中调用一次初始化方法即可：

const authStore = useAuthStore(pinia)
authStore.initAuth()

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