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

路由守卫

作用：对路由进行权限控制，满足一定条件才能看到跳转到的路由组件
分类：全局守卫、独享守卫、组件内守卫

全局守卫:

// 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'
	}
})

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

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

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

// 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()
              }
          }
		},
	]
}）

组件内路由守卫：

// 配置在每个路由组件中，位置与生命周期函数同级

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

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

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