路由守衛

1. 作用：對路由進行許可權控制

   配置路由守衛應在暴露前配置

2. 分類：全局守衛、獨享守衛、組件內守衛

首先先給需要鑒權的路由設置好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) {
     ...
}