路由守卫是路由在跳转前、后过程中的一些钩子函数,这些函数可以让你操作一些其他的事,在后台管理中设置权限时经常看到,在实现路由跳转前校验是否有权限,有权限就可以通过,反之就会被执行其他操作,如返回首页。
路由守卫分为:全局守卫,组件守卫,路由独享
路由守卫参数:
to:目标路由对象
from:即将要离开的路由对象
next():放行
1.全局守卫:所有的路由切换都会执行,一般写在路由配置文件中
router.beforeEach(fn) :to\from\next()
router.afterEach(fn):to\from
router.beforeResolve(fn):to\from\next()
2.组件守卫:
beforeRouteEnter(fn):to\from\next() #在渲染该组件的对应路由被confirm前调用,不能获取组件实例,因此无法this
beforeRouteUpdate(fn):to\from\next()
beforeRouteLeave(fn):to\from\next()
3.路由独享守卫:一般写在路由配置中
beforeEnter(fn):to\from\next()
router.beforeEach(function(to,from,next){
if(to.matched.some(item=>item.meta.requiresAuth)){
// 获取本地存储数据
let userInfo = localStorage.getItem('userInfo') || {};
try{
userInfo = JSON.parse(userInfo)
}catch(err){
userInfo = {};
}
// 判断当前用户信息是否包含token
if(userInfo.authorization){
// 发起请求校验token的有效性
request.get('/jwtverify',{
params:{
authorization:userInfo.authorization
}
}).then(({data})=>{
if(data.code === 0){
next({
path:'/login',
query:{
// 跳转到登录页面,并传递目标页面路径
redirectTo:to.fullPath
}
});
}
})
next();
}else{
next({
path:'/login',
query:{
// 跳转到登录页面,并传递目标页面路径
redirectTo:to.fullPath
}
});
}
}else{
next();
}
});