Vue3组合式API登录后按用户验证状态重定向路由问题排查

路由跳转失效的核心原因是/dashboard路由配置的beforeEnter导航守卫逻辑不完整：

• Vue Router的导航守卫要求所有逻辑分支必须显式调用next()方法，否则导航会被直接中断、停留在当前页面
• 现有代码仅处理了「账号未验证」的分支：当verified为"false"时调用next('verify')跳转验证页；但当账号已验证（verified为"true"）时，没有执行任何next()调用，导航被挂起，因此始终停留在登录页
• 未验证账号能正常跳转，恰好是因为该分支触发了next()调用，导航流程可以正常执行

1. 补全beforeEnter守卫的逻辑分支 #

修改/dashboard路由的beforeEnter配置，确保所有情况都正确调用next()，同时使用严格相等判断避免类型隐式转换问题：

{
  path: "/dashboard",
  name: "dashboard",
  component: () => import("../views/UserDashboard.vue"),
  meta: { needsAuth: true },
  beforeEnter: (to, from, next) => {
    const isVerified = localStorage.getItem('verified') === "true"
    if (!isVerified) {
      // 未验证则跳转验证页，加return终止后续逻辑执行
      return next({ name: 'verify' })
    }
    // 已验证必须调用next()放行，否则导航中断
    next()
  }
}

改完后已验证账号即可正常跳转至仪表盘。

2. （可选优化）统一收敛路由鉴权逻辑 #

单独给单个路由写beforeEnter会导致鉴权逻辑分散，后续维护容易出现同类遗漏问题，建议把登录校验、验证状态校验统一收敛到全局beforeEach守卫中，同时可以删掉dashboard上单独的beforeEnter配置：

router.beforeEach(async (to, from, next) => {
  const accessToken = localStorage.getItem('accessToken')
  const isVerified = localStorage.getItem('verified') === "true"

  // 场景1：路由需要登录但无token，跳登录页
  if (to.meta.needsAuth && !accessToken) {
    return next({ name: 'signin' })
  }

  // 场景2：已登录用户访问登录页，自动根据验证状态跳转对应页面
  if (to.name === 'signin' && accessToken) {
    return next({ name: isVerified ? 'dashboard' : 'verify' })
  }

  // 场景3：已登录访问需要鉴权的页面，校验验证状态
  if (to.meta.needsAuth && accessToken) {
    // 要去仪表盘但未验证，跳验证页
    if (to.name === 'dashboard' && !isVerified) {
      return next({ name: 'verify' })
    }
    // 要去验证页但已经完成验证，跳仪表盘
    if (to.name === 'verify' && isVerified) {
      return next({ name: 'dashboard' })
    }
  }

  // 其余场景全部放行
  next()
})

优化后还能自动处理已登录用户手动输入登录页、验证页地址的异常跳转场景，逻辑更严谨。

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