? 在使用vue路由守卫的beforeEach方法时可能会出现无限递归，也就是死循环的问题，根本原因在于next()方法在不合适的地方错误调用所致，先来看一下官方对next()方法的解释：
beforeEach方法体：
router.beforeEach((to, from, next) => {
// ...
})
经过我的测试了一些数据,大概猜测出next()方法的底层实现逻辑(别问为什么不看源码,不会ts,我搞后端的)
经过我的测试,实际上,next()方法的调用是个递归的过程
以下用粗略的js代码来还原next()过程可能发生了什么,有问题请指出:
let router={}
let router.to='xxx'
let router.from='xxx'
//声明next函数
next:function(to,from,_next){
if(to===undefined){
//TODO
//相当于beforeEach里面调用next(),也就是放行,return回去,继续执行beforeEach后面的语句
return;
}else if(typeof to=='string'){
//TODO
//相当于beforeEach里面调用next('/string'),此时当前要前往的path被改变了,所以继续调用一层router.beforeEach。对新的path调用路由守卫进行校验,这种情况最容易出现死循环(死递归)
router.to=to;
router.beforeEach(router.to,rourer.from,next);
//回到上一层beforeEach,继续执行后面的代码
return;
}
}
router.beforeEach((to,from,next)=>{
//程序员TODO
})
router.beforeEach(router.to,rourer.from,next);//路由守卫调用
beforeEach和next是个轮流相互调用的过程,容易造成死循环
这里给出一种无死循环的样例:
router.beforeEach((to,from,next)=>{
console.log(to.path);
if(to.path==='/login'){
console.log(1)
next();
}else{
let user=localStorage.getItem('userInfo')?JSON.parse(localStorage.getItem('userInfo')):null;
if(user){
console.log(2)
next();
}else {
console.log(3)
next('/login');
}
}
console.log(4)
})
以下是一些测试样例:
当我未登录,前往'/content'页面时,控制台打印情况:
/content
3
/login
1
4
4
| 打印内容 | 解释 |
|---|---|
| /content | 前往/content页面，console.log(to.path)执行 |
| 3 | 不是/login页面，又未在localStorage中获取到user相关信息，执行console.log(3)，调用next(‘/login’)方法 |
| /login | next(‘/login’)执行期间，当前要前往的url已经变成了/login，所以再一次调用beforeEach方法，方法第一行console.log(to.path);打印了当前要前往的url是/login |
| 1 | beforeEach方法中第二行if(to.path===‘/login’)成立，console.log(1)打印1，执行next()方法 |
| 4 | 因为next方法中没携带参数，又return回来了，跳过else语句，执行beforeEach方法中的console.log(4) |
| 4 | 回到最外层的beforeEach方法，跳过else语句，再跳出到else语句外层，执行console.log(4) |
当我未登录,前往'/login'页面时,控制台打印情况:
/login
1
4
| 打印内容 | 解释 |
|---|---|
| /login | 当前要前往的是/login页面，beforeEach第一行console.log(to.path);打印 |
| 1 | if(to.path===‘/login’)成立，打印console.log(1) |
| 4 | 继续执行next()方法，未携带参数,next方法return回到beforeEach，跳过else语句，执行console.log(4) |
综上,尽量别在beforeEach函数内前面调用带参数的next()函数,但也不能一个next()方法都不写.
