前端路由拦截时如何防止无限重定向？

Top丶卫红提问于 2026-02-25 16:34:20 阅读 17

前端

我在用 Vue Router 做登录权限控制，但一进页面就疯狂跳转到登录页，明显是陷入了死循环。我试过在 beforeEach 里判断 token，没 token 就 redirect 到 /login，但好像没处理好白名单路径。

比如访问 /login 的时候也触发了拦截，又重定向到自己，结果浏览器直接卡死。下面是我写的拦截逻辑：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (!token && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

明明加了 to.path !== ‘/login’ 判断，怎么还是会无限重定向？是不是哪里漏了？

我来解答赞 2 收藏

反馈

2 条解答

司马永香 Lv1

啊这个问题我之前也碰到过，差点被搞疯！其实你的问题出在重定向到/login后，这个路由守卫又被触发了，虽然你加了判断，但可能还有其他路径需要排除。

关键是要建立一个白名单，把所有不需要权限的路径都放进去。比如登录页、注册页、404页面之类的。可以这样改：

const whiteList = ['/login', '/register', '/404'] // 这里放所有不需要权限的路径



router.beforeEach((to, from, next) => {

  const token = localStorage.getItem('token')

  if (whiteList.includes(to.path)) {

    // 在白名单里直接放行

    return next()

  }

  

  if (!token) {

    next('/login')

  } else {

    next()

  }

})

另外建议再加个判断，如果已经有token还访问/login的话，可以重定向到首页，避免登录成功后又跳回登录页：

if (token && to.path === '/login') {

  return next('/')

}

这样应该就能解决无限重定向的问题了。调试的时候可以在控制台打印to.path看看路由变化，特别管用。

2026-03-06 01:03

___会娟 Lv1

你这个问题我见太多次了，真不是你一个人踩坑。问题出在你只判断了 /login，但没考虑其他可能的白名单路径，比如 /register、/reset-password 这些，更关键的是——你没处理 name 为 login 的路由跳转！

有些项目会用命名路由，比如 next({ name: 'login' })，这时候 to.path 是 /login，但如果你用 name 跳转，to.path 可能还是 /login，但逻辑上你没拦住。

更稳妥的做法是搞个白名单数组，把所有公开路由都列出来，包括 path 和 name：

const whiteList = ['/login', '/register', '/reset-password'] // 也可以加 name: 'login' 等



router.beforeEach((to, from, next) => {

  const token = localStorage.getItem('token')



  // 有 token，放行

  if (token) {

    next()

    return

  }



  // 没 token，但访问的是白名单，放行

  if (whiteList.includes(to.path) || (to.name && whiteList.includes(to.name.toString()))) {

    next()

    return

  }



  // 没 token，又不是白名单，跳登录页

  next('/login')

})

顺带说一句，你原代码里 next('/login') 之后没 return，虽然能跑，但万一后面还有逻辑，容易出事，加个 return 更稳妥。

还有个更偷懒的写法是直接判断 to.path === '/login' 不够，得用 !whiteList.includes(to.path) 这种，主题里加个配置文件，后面加新页面也方便维护。

2026-02-25 17:01