如何配置Vue路由守卫 解决已登录用户访问登录页else if分支不生效问题

问题根因 #

• 核心逻辑错误：已登录用户访问登录页的分支中，你执行的是return next()，该操作是放行当前路由请求，并未执行跳转逻辑，自然不会跳转到其他页面
• 分支触发条件不稳定：如果你的登录路由归属的父路由设置了meta.authRequired=true，第一个if判断就会命中，直接走普通鉴权逻辑，完全不会进入后续的else if分支
• 分支判断冗余模糊：else if(to.matched.some((record) => !record.meta.authRequired))的覆盖范围不严谨，若登录路由的meta配置变动极易导致分支无法触发
• 逻辑顺序不合理：普通鉴权路由的判断优先于登录页特殊场景判断，增加了逻辑冲突的概率

修正后的完整代码 #

router.beforeEach((to, from, next) => {
  const main = useAuthStore(router.pinia);

  // 优先处理登录页特殊逻辑：已登录用户访问登录页直接跳转到业务首页
  if (to.path === '/login' && main.authState) {
    // 此处替换为你项目实际的首页路径即可
    return next('/dashboard')
  }

  // 处理需要鉴权的路由逻辑：未登录用户跳转登录页
  if (to.matched.some(record => record.meta.authRequired)) {
    if (!main.authState) {
      return next('/login')
    }
  }

  // 其余情况全部放行
  next()
})

补充说明 #

你提供的signOut方法功能正常，仅需注意localStorage.removeItem是同步API，不需要加await，优化后代码更规范：

async signOut() {
  await auth.logout();
  localStorage.removeItem("authenticated");
  await router.replace({ name: "Login" });
}

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