router.beforeEach((to, from, next) => {
NProgress.start();
const query = to.query.token
//请求地址带token
if (query) {
sessionStorage.setItem("token", query)
next()
}
if (to.path === '/login') {
console.log(111);
next()
}
const token = sessionStorage.getItem("token")
// 不加to.path!=="login"会导致内存溢出,
if (!token && to.path !== '/login') {
console.log(222);
next('/login')
}
// 其他的都放行
next()
})
router.afterEach(() => {
NProgress.done();
});
因为if判断里的条件只要满足都会执行,而执行顺序是从上而下。所以,如果第3个判断不加to.path!==“login”,那么默认会先打印222,并跳登录,当匹配到跳登录时,打印111,并跳转,同时下面的没有token的判断也会执行,打印222,并跳转。。。这样就循环往复,进入了死循环,导致超过最大调用堆栈大小。
router.beforeEach((to, from, next) => {
const token = sessionStorage.getItem('token')
// 存在 token 说明已经登录
if (token) {
// 登录过就不能访问登录界面,需要中断这一次路由守卫,执行下一次路由守卫,并且下一次守卫的to是主页'
if (to.path === '/login') {
next({ path: '/' })
}
// 保存在store中路由不为空则放行 (如果执行了刷新操作,则 store 里的路由为空,此时需要重新添加路由)
if (store.getters.routeList.length ) {
//放行
next()
} else {
// 将路由添加到 store 中,用来标记已添加动态路由
store.commit('ADD_ROUTER', '需要添加的路由')
router.addRoutes('需要添加的路由')
// 如果 addRoutes 并未完成,路由守卫会一层一层的执行执行,直到 addRoutes 完成,找到对应的路由
next({ ...to, replace: true })
}
} else {
// 未登录时,注意 :在这里也许你的项目不只有 logon 不需要登录 ,register 等其他不需要登录的页面也需要处理
if (to.path !== '/login') {
next({ path: '/login' })
} else {
next()
}
}