路由守衛
-
作用：對路由進行權限控制
配置路由守衛應在暴露前配置 -
分類：全域守衛、獨享守衛、組件內守衛
首先先給需要鑒權的路由設定好meta配置項，
meta配置項：是vue-router中的一個物件，主要用于存盤路由的元資料（meta data）資訊，這些元資料資訊可以是一些描述性的內容，比如頁面的標題、關鍵詞、描述等，也可以是一些業務相關的引數或標識，比如是否需要登錄、權限等級等，
{
name: 'zhuye',
path: '/home',
component: Home,
children: [
{
name: 'xinwen',
path: 'news',
component: News,
//isAuth是否需要身份驗證，title設定網頁標題
meta: { isAuth: true, title:'新聞' }
},
]
}
]
}
全域守衛
beforeEach是Vue Router中的一個鉤子函式，用于在路由切換前執行一些操作，可以利用beforeEach鉤子函式實作某些全域的路由攔截控制，
beforeEach接收3個引數： to：要跳轉的目標路由物件，from：當前導航正要離開的路由，next：呼叫該方法后，表示進入下一個路由
//全域前置守衛：初始化時執行、每次路由切換前執行
router.beforeEach((to,from,next)=>{
if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制
if(localStorage.getItem('school') === 'atguigu'){ //權限控制的具體規則
next() //放行
}else{
alert('暫無權限查看')
}
}else{
next() //放行
}
})
afterEach是Vue Router中的一個鉤子函式，用于在路由完成跳轉后執行一些操作，可以利用afterEach鉤子函式實作某些全域的路由跳轉后的處理
afterEach方法接收2個引數：to：成功跳轉的目標路由物件，from：當前導航正要離開的路由
//全域后置守衛：初始化時執行、每次路由切換后執行
router.afterEach((to,from)=>{
if(to.meta.title){
document.title = to.meta.title //修改網頁的title
}else{
document.title = 'vue_test'
}
})
獨享守衛
可以讓某個路由及其所有子路由獨享一個路由守衛，這個路由守衛與全域前置守衛beforeEach相似，但是只作用于該路由及其子路由，
beforeEnter(to,from,next){
if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暫無權限查看')
}
}else{
next()
}
}
組件內守衛
在組件內部使用Vue Router提供的路由守衛來控制組件的進入、離開、更新等操作，
//進入守衛：通過路由規則，進入該組件時被呼叫
beforeRouteEnter (to, from, next) {
... //里面的配置和前面差不多
},
//離開守衛：通過路由規則，離開該組件時被呼叫
beforeRouteLeave (to, from, next) {
...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/548933.html
標籤：其他