vue2路由守卫

全局前置_路由守卫

以前古代有一个职称叫御前侍卫:保护君王的安全,而路由守卫就是保护路由的安全(权限)

vue2路由守卫_第1张图片就是在Home组件中,我们需要先校验内容中的school是否满足要求,才能展示组件,否则不展示组件

vue2路由守卫_第2张图片首先在路由规则的index.js中我们不能直接暴露,否则就没法设置拦截了

vue2路由守卫_第3张图片 router.beforeEach(()=>{})路由每次切换之前都会执行里面的函数

vue2路由守卫_第4张图片这个beforeEach里面有三个参数,to,from,next分别为从哪里来,去哪里,放行  

全局后置_路由守卫

vue2路由守卫_第5张图片

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

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

vue2路由守卫_第6张图片当然这个属性的值需要放在meta里面

vue2路由守卫_第7张图片

vue2路由守卫_第8张图片to.meta.isAuth判断是否需要鉴权

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

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

但是没有next参数

vue2路由守卫_第9张图片

独享路由守卫

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

vue2路由守卫_第10张图片

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

组件内路由守卫

就是组件内部的路由守卫

vue2路由守卫_第11张图片它只有俩个路由守卫,通过路由规则,分别为进入该组件前被调用,离开该组件时调用 

是不是感觉跟前置,后置路由组件很像?

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

总结

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

//全局前置守卫:初始化时执行、每次路由切换前执行
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) {
}

你可能感兴趣的:(前端框架Vue2+Vue3,前端,javascript,服务器)