Vue Router系列之（十二）路由守卫

路由守卫

1. 作用：对路由进行权限控制，满足一定条件才能看到跳转到的路由组件

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫:

   // src/router/index.js
   
   // router：我们创建的路由器实例
   // router.beforeEach(function)：每一次进行路由跳转之前都会帮我们调用我们传入的函数
   //全局前置守卫：初始化【当前js文件被解析时，路由器的规则一加载的时候】时执行、每次路由切换前执行
   //to：目标路由的信息
   //from：当前所处路由的信息
   //next：放行
   router.beforeEach((to,from,next)=>{
   	console.log('beforeEach',to,from)
     	// 我们在进行鉴权时，并不是所有的路由组件都要进行鉴权，所以可以通过一个我们自定义的配置项，配置在路由规则中，只有这个配置项的值为true，才会进行鉴权。这里用到的自定义配置项就是isAuth
     	// isAuth是我们自定义的配置项，放在每个路由下面的meta配置项中
     	// meta：路由元信息
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
   			next() //放行
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next() //放行
   	}
   })
   
   //全局后置守卫：初始化时执行、每次路由切换后【展示区中展示出该组件后，也就是成功进入到该组件后】执行
   //to：目标路由的信息
   //from：当前所处路由的信息
   router.afterEach((to,from)=>{
   	console.log('afterEach',to,from)
   	if(to.meta.title){ 
         	// 以下逻辑如果放到前置路由守卫中需要写多次
   		document.title = to.meta.title //根据每个路由中的meta.title修改网页的title
   	}else{
   		document.title = 'vue_test'
   	}
   })
   

4. 独享路由守卫：只有独享前置路由守卫，没有独享后置路由守卫

   某一个路由单独享用的路由守卫

   执行时机：路由器匹配到此次的路由规则后，进入到组件之前

   

   // src/router/index.js
   const router =  new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About,
   			meta:{
   				title: '关于'
   			},
             	 // 配置在每个路由中
   			beforeEnter(to,from,next){
                 console.log('beforeEnter',to,from)
                 if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
                     if(localStorage.getItem('school') === 'atguigu'){
                         next()
                     }else{
                         alert('暂无权限查看')
                         // next({name:'guanyu'})
                     }
                 }else{
                     next()
                 }
             }
   		},
   	]
   }）
   

5. 组件内路由守卫：

   // 配置在每个路由组件中，位置与生命周期函数同级
   
   //进入守卫：通过路由规则【直接在其他组件中写当前组件(beforeRouteEnter所在的组件)的标签是不会触发该方法的调用的】，进入该组件时被调用【比如当前是在其他组件的，此时点击了当前组件的导航项，路由器匹配到路由进入该组件之前，该方法就要被调用了，会在mounted钩子执行前调用】
   beforeRouteEnter (to, from, next) {
   	// 如果不调用next()是不能进入到当前组件的  
   },
   //离开守卫：通过路由规则，离开该组件时被调用【比如当前是在该组件的，此时点击了另一个导航项，该方法就要被调用了】
   beforeRouteLeave (to, from, next) {
   	// 如果不调用next()是不能从当前组件离开的  
   }
   

​ 路由组件切换后，前置路由守卫和后置路由守卫就都执行结束了，而beforeRouteLeave是从当前路由再切走时，beforeRouteLeave才会调用

各种路由守卫的执行时机及执行顺序