路由守衛

當路由切換時，判斷權限

路由守衛類型

1.全局守衛
2.獨享守衛
3.組件內守衛

1.全局守衛

1.前置路由守衛 全局前置路由守衛————初始化的時候被調用、每次路由切換之前被調用
在需要加上路由守衛的路由配置中加上
meta：{isAuth：true}

 {path: '/',name: 'Home',component: () => import('../views/Home.vue'),meta: { isAuth: true, title:'主頁' },},

//全局前置路由守衛————初始化的時候被調用、每次路由切換之前被調用
router.beforeEach((to, from, next) => {//如果路由需要驗證if (to.meta.isAuth) {if (localStorage.getItem('123') === '123') {next()  //放行} else {alert('抱歉，您無權限查看！')}} else {// 否則，放行next()}
})

2.后置路由守衛 ，路由跳轉之后執行的事件，一般用作跳轉路由后更改網頁名

{path: '/',name: 'Home',component: () => import('../views/Home.vue'),meta: { isAuth: true, title:'主頁' },},

//全局后置路由守衛————初始化的時候被調用、每次路由切換之后被調用
router.afterEach((to, from) => {document.title = to.meta.title || '默認名'    //修改網頁的title
})

3.獨享路由守衛，某一個路由所單獨享用的路由守衛，獨享路由守衛只有前置沒有后置

    {path: '/',name: 'Home',component: () => import('../views/Home.vue'),meta: { isAuth: true },beforeEnter: (to, from, next) => {if (to.meta.isAuth) { //判斷是否需要授權if (localStorage.getItem('123') === '123') {next()  //放行} else {alert('抱歉，您無權限查看！')}} else {next()  //放行}}},

4.組件內守衛

//通過路由規則，進入該組件時被調用
beforeRouteEnter(to,from,next) {if(toString.meta.isAuth){if(localStorage.getTime('123')==='123'){next()}else{alert('無權限查看！')}} else{next()}
},//通過路由規則，離開該組件時被調用 
beforeRouteLeave(to,from,next) {next()
}