路由守衛(wèi)是路由在跳轉(zhuǎn)前、后過程中的一些鉤子函數(shù)州叠，這些函數(shù)可以讓你操作一些其他的事，在后臺(tái)管理中設(shè)置權(quán)限時(shí)經(jīng)承琢蓿看到咧栗，在實(shí)現(xiàn)路由跳轉(zhuǎn)前校驗(yàn)是否有權(quán)限，有權(quán)限就可以通過虱肄，反之就會(huì)被執(zhí)行其他操作，如返回首頁(yè)咏窿。
路由守衛(wèi)分為：全局守衛(wèi)御毅，組件守衛(wèi)，路由獨(dú)享
路由守衛(wèi)參數(shù)：
to：目標(biāo)路由對(duì)象
from：即將要離開的路由對(duì)象
next()：放行
1.全局守衛(wèi)：所有的路由切換都會(huì)執(zhí)行，一般寫在路由配置文件中
router.beforeEach(fn) :to\from\next()
router.afterEach(fn):to\from
router.beforeResolve(fn):to\from\next()
2.組件守衛(wèi)：
beforeRouteEnter(fn):to\from\next() #在渲染該組件的對(duì)應(yīng)路由被confirm前調(diào)用，不能獲取組件實(shí)例插掂，因此無法this
beforeRouteUpdate(fn):to\from\next()
beforeRouteLeave(fn):to\from\next()
3.路由獨(dú)享守衛(wèi)：一般寫在路由配置中
beforeEnter(fn):to\from\next()
router.beforeEach(function(to,from,next){
if(to.matched.some(item=>item.meta.requiresAuth)){
// 獲取本地存儲(chǔ)數(shù)據(jù)
let userInfo = localStorage.getItem('userInfo') || {};
try{
userInfo = JSON.parse(userInfo)
}catch(err){
userInfo = {};
}
// 判斷當(dāng)前用戶信息是否包含token
if(userInfo.authorization){
// 發(fā)起請(qǐng)求校驗(yàn)token的有效性
request.get('/jwtverify',{
params:{
authorization:userInfo.authorization
}
}).then(({data})=>{
if(data.code === 0){
next({
path:'/login',
query:{
// 跳轉(zhuǎn)到登錄頁(yè)面肆氓，并傳遞目標(biāo)頁(yè)面路徑
redirectTo:to.fullPath
}
});
}
})
next();
}else{
next({
path:'/login',
query:{
// 跳轉(zhuǎn)到登錄頁(yè)面捐凭，并傳遞目標(biāo)頁(yè)面路徑
redirectTo:to.fullPath
}
});
}
}else{
next();
}
});
