Vue之路由守卫

一、路由守卫理解

路由导航守卫是为了路由跳转之前做的检查及操作
比如：用户没有登录 而是直接通过修改浏览器 url 来访问网页，这种操作无疑是不安全的。路由导航守卫可以让我们对用户要跳转的路由做一次检查，符合条件后放行，不符合条件则强制用户跳转登录页面。

二、路由守卫分类

全局守卫、独享守卫、组件内守卫

2.1、全局守卫

写在路由配置的地方index.js

使用to.meta.isAuth需要在路由组件属性中写以下内容

meta:{
isAuth:true/false
}

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'test'){ //权限控制的具体规则
			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'
	}
})

2.2、独享守卫

写在路由组件属性内
独享守卫没有后置守卫

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()
	}
}

2.3、组件内守卫

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}