Vue3路由守卫处理带Token参数链接时出现无限加载问题

常见错误点及修复方案 #

1. 全局前置守卫未放行目标路由 #

无限加载大概率是全局前置守卫的逻辑问题——没有对密码重置这类无需登录的路由做放行处理，导致每次访问都被拦截，进而触发循环跳转。

比如错误的守卫逻辑：

router.beforeEach((to, from, next) => {
  const userToken = localStorage.getItem('token')
  // 所有路由都强制校验登录态，包括密码重置页
  if (!userToken) {
    next('/login')
  } else {
    next()
  }
})

这种情况下，访问密码重置路由时，因为没有登录token会被跳转到登录页，若登录页同样触发守卫校验，就会形成循环。

修复方式：添加路由白名单，排除无需校验的路由：

router.beforeEach((to, from, next) => {
  const userToken = localStorage.getItem('token')
  // 白名单：无需登录即可访问的路由
  const whiteList = ['/login', '/password-reset']
  // 匹配动态路由（如/password-reset/xxx）需用matched判断
  const isInWhiteList = whiteList.includes(to.path) || 
                        to.matched.some(record => whiteList.includes(record.path.split('/:')[0]))
  
  if (isInWhiteList) {
    next() // 直接放行
  } else {
    userToken ? next() : next('/login')
  }
})

如果路由有命名（比如name: 'PasswordReset'），用to.name判断会更准确，避免路径匹配的误差。

2. 守卫内重复触发路由跳转 #

如果守卫中对密码重置路由做了额外处理，比如解析token后又调用next({ path: to.fullPath })，会导致重复触发前置守卫，形成无限循环。

错误示例：

router.beforeEach((to, from, next) => {
  if (to.path.startsWith('/password-reset')) {
    const token = to.params.token
    // 错误逻辑：解析后跳转回当前路由
    next({ path: `/password-reset/Token/${token}` })
  }
  // ...其他逻辑
})

修复：直接调用next()放行，无需重复跳转相同路径。

3. 组件内部的循环跳转逻辑 #

检查PasswordReset组件的生命周期钩子（如onMounted），是否存在验证token失败后跳转回当前路由的代码：

onMounted(() => {
  const token = route.params.token
  if (!validateToken(token)) {
    // 错误：跳转回当前路由，触发守卫循环
    router.push({ path: route.fullPath })
  }
})

修复：跳转至错误页或登录页，而非当前路由。

4. History模式下的服务器配置问题 #

若使用history模式，服务器未配置fallback规则会导致刷新页面时返回404，进而引发应用内部路由逻辑异常。虽然通常表现为页面空白，但也可能间接导致加载异常，可检查服务器配置（如Nginx需添加try_files $uri $uri/ /index.html;规则）。

快速排查步骤 #

1. 临时注释全局前置守卫，测试密码重置链接是否正常加载，确认问题来源。
2. 逐步恢复守卫逻辑，先添加白名单放行，观察是否解决。
3. 检查守卫和组件内是否存在重复跳转相同路由的代码。

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