vue 路由攔截

爲什麼要設置路由攔截

1.有些頁面組件頁面需要登錄才能操作，不然會發生不可預知的錯誤
2.根據用戶權限配置頁面，若沒有這個權限，則你無法進入，進行攔截

1.路由設置：router/index.js

export default new Router({
routes: [
{
path: ‘/index’,
name: ‘index’,
meta: { //自定義配置
requireAuth: true // 加入此字段 進入頁面前判斷是否需要登陸
},
component: Index
}
]
})

2.路由攔截 main.js(若是父子路由跳到第三點)

//路由攔截
let token = sessionStorage.getItem(‘token’);
//這裏以token爲例 如果用戶登錄了就會獲取到token
router.beforeEach((to,from,next)=>{
if(to.meta.requireAuth){ //爲true 需要通過驗證才能跳入
if(token){ //如果有token 則直接跳入路由
next();
console.log(‘我進入了路由’);
}else{ //否則進入登錄頁 重新登錄
next({
path:’/login’
})
}
}else{ //不是爲登錄才能訪問的頁面直接跳轉
next();
}
})

3.父子路由的配置方法

router.beforeEach((to,from,next)=>{
//因爲直接to.meta.requireAuth是訪問不到的，需要matched去匹配
if(to.matched.some(record => record.meta.requireAuth)){
if(token){ //如果有token 則直接跳入路由
next();
console.log(‘我進入了路由’);
}else{ //否則進入登錄頁 重新登錄
next({
path:’/login’
})
}
}else{ //不是爲登錄才能訪問的頁面直接跳轉
next();
}
})