导航守卫常见报错 Maximum call stack size exceeded ：超出最大调用堆栈大小

我在写 导航前置守卫的时候 经常出现堆栈溢出的错误 也能修改解决 但是一直不知到为什么

今天 认真总结如下【希望有同样问题的能有一些帮助】：

import store from '@/store'
router.beforeEach((to, from, next) => {
  // to.path 你要 跳转到那里去
  // from。path 从 那个地址 跳转的
  // next() --允许跳转  next(false) --不允许跳转  next('/login') --跳转到指定的位置

  //简单 只把错误代码写出来
  if(!store.state.user.token) return next('/login')
})

原始想法：

我希望通过判断token的有无来进行 跳转登录页的控制

但是他直接给我报错了【堆栈溢出】我试着分析了一下造成这种错误的可能性

错误原因：

因为出现了死循环【比如递归 for 等死循环】 

疑惑：

但是在我的源码中并没有 以上 常规能够造成死循环的代码【只是用了一个简单的不能在简单的if判断 为什么就造成了死循环？】

解释：

在上面这句代码中 因为出现了跳转 语句 但是没有判断跳转是否成功 的方法所以 造成了

token 不存在 就一直在跳转 直到超出堆栈调用的最大限度

我们简单的来理解一下跳转语句

// 在跳转中的等同关系
next('/login) === this.$router.push('/login')

next('/login') // 的触发会被导航守卫捕捉到 再次进行判断跳转后的结果

佐证：

//报错👇 超出堆栈最大调用 【出现死循环，导航守卫被多次触发】
if(!store.state.user.token) return next('/login') 

// 修改后的代码👇 添加了当跳转成功的判断 不在报错 正常运行 
if(!store.state.user.token && to.path !== '/login') return next('/login')  

！！！当发生跳转 再次触发导航守卫 

我最近在玩智能AI的时候问了它这个问题，给大家截个图看一下 它的回答：