原理:
permisson.js中,router.beforeEach()做了路由拦截
beforeEach 守卫是异步解析执行,只有执行next()才表示路由成功可以被resolved,跳出循环直接进入to路由。
next(‘login’) 表示路由拦截成功,重定向至login,会再次调用beforeEach()
next() 和 next({ …to, replace: true })是不一样的,后者会再次调用beforeEach()
BUG出现原因:
beforeEach()一直没有调用到next(),出现无限循环。
我这里的出现原因是没有拿到用户权限roles信息,导致一直无限循环
解决:
在store中写了一个触发SET_ROLES的方法,并在第一次走此循环的时候触发一下。
/src/store/modules/user.js:
//写在方法actions对象中
setRole({ commit }, roles) {
return new Promise(resolve => {
commit('SET_ROLES',roles )
resolve()
})
},
permisson.js中在初次循环时调用(上图黄色标注处)
注意:在被aysnc修饰的beforeEach中共调用store的异步函数,由于beforeEach加上了async修饰,store调用是前面要加上await修饰嗷。
await store.dispatch('user/setRole', roles)
ps:详细VUE 路由守卫 next() / next({ …to, replace: true }) / next(‘/‘)的区别可参考这篇