路由守卫用来跟踪和处理路由,路由守卫有前置路由守卫和后置路由守卫,分别是:beforeEach、afterEach,从他们的名字中可以清楚了解到,一个是在路由来临前触发,另一个是在路由结束后触发。
在开发中使用beforeEach比较多,因为在这个回调函数中可以对路由做很多预处理,例如:对登录进行安全验证,对特定路由拦截,对首页等公开资源进行放行等。
使用格式
//to: 当前要访问的路由
//from: 上一个路由
//next: 用于对路由拦截放行,时能都通过该函数设置路由的一些属性
router.beforeEach((to, from, next) => {
//TODO
});
router.afterEach(() => {
//TODO
})
使用示例
//路由守卫
//使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登录,以及对路由里没有配置的情况进行404处理
router.beforeEach((to, from, next) => {
// 路由发生变化,修改页面标题
if (to.meta.title) {
document.title = to.meta.title
}
// 每次路由开始时,启动NProgress进度条
NProgress.start()
// 对错误路由的判断,如果匹配(match)到的路由不存在则进入错误页面error
if (to.matched.length === 0) {
from.name ? next({name: from.name}) : next('/error');
} else {
// 正常进入的路由
// 判断token是否存在
if (Cookies.get('token') || to.fullPath.indexOf('/auth') !== -1) {
next();//放行
NProgress.done()
} else {
// 对错误页面和认证页面放行
if (to.path === '/error') next();
if (to.path === '/auth') next();
// 其他情况转到认证页面
next('/auth');
}
}
})
router.afterEach(() => {
// 在每个路由结束后关闭,NProgress 进度条
NProgress.done()
})
注意事项:
在使用beforeEach时路由易陷入循环,这种情况多是未对该放行的路由放行,例如要跳转到/error页面,但是没有给他放行,此时路由就会陷入循环,因为跳转到/error页面会进入该页面的路由,写。通常,在最后的else分支都要对白名单路由放行。
评论区