vue2路由守卫

全局前置_路由守卫

以前古代有一个职称叫御前侍卫：保护君王的安全，而路由守卫就是保护路由的安全（权限）

就是在Home组件中，我们需要先校验内容中的school是否满足要求，才能展示组件，否则不展示组件

首先在路由规则的index.js中我们不能直接暴露，否则就没法设置拦截了

 router.beforeEach(()=>{})路由每次切换之前都会执行里面的函数

这个beforeEach里面有三个参数，to,from,next分别为从哪里来，去哪里，放行  

全局后置_路由守卫

 但上面写的方式有一个缺陷，如果你要对100个页面切换，那不就要写100次了吗？这也太麻烦了。

有一种解决方案，就是开始的时候自定义的属性，然后在循环里面进行判断这个属性的值为真还是假。

当然这个属性的值需要放在meta里面

to.meta.isAuth判断是否需要鉴权

有前置就有后置，那就是router.afterEach()

全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用

但是没有next参数

独享路由守卫

就是一个路由守卫独立享受的路由守卫

新闻单独享受的页面组件，但是要注意的一点，独享路由守卫是没有afterEnter的

组件内路由守卫

就是组件内部的路由守卫

它只有俩个路由守卫，通过路由规则，分别为进入该组件前被调用，离开该组件时调用 

是不是感觉跟前置，后置路由组件很像？

但是这俩个是不同的，组件内部的路由守卫是用于表示组件独有的的逻辑

总结

* 作用：对路由进行权限控制
* 分类：全局守卫、独享守卫、组件内守卫
* 全局守卫:

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

独享守卫:

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 (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}