路由守卫

（供自己后期复习使用,如果哪里不对希望大佬指正）

路由守卫

1. 作用：对路由进行权限控制
     举个例子说明一下：比如登录淘宝，只有登陆了才能查看个人中心，没有登陆的话就不行，要是想通过强行修改路径跳转到个人中心也是不行的。

2. 分类：全局守卫
        包括：全局前置守卫（beforeEach）、全局后置守卫（afterEach）
     独享守卫（注意没有后置守卫）
        包括： 前置守卫（beforeEnter）
     组件内守卫
        包括：进入守卫（beforeRouteEnter ）、离开守卫（beforeRouteLeave ）

3. 全局守卫:

   //全局前置守卫：初始化时执行、每次路由切换前执行
   router.beforeEach((to,from,next)=>{ //这里传三个参数to、from、next
      //这里简单说一下这三个参数to表示要去哪、from表示从哪来、next表示放行
   	console.log('beforeEach',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制，这里的meta也是路由的一个参数，我们可以添加自己想添加的东西
   		if(localStorage.getItem('name') === 'xxx'){ //权限控制的具体规则,只有当那么为xxx时才能放行
   			next() //放行
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next() //放行
   	}
   })
   
   //全局后置守卫：初始化时执行、每次路由切换后执行、一般可以用于跳转后改变该页面的title
   router.afterEach((to,from)=>{//注意全局后置守卫方法里只传两个参数to和from，没有next
   	console.log('afterEach',to,from)
   	if(to.meta.title){ 
   		document.title = to.meta.title //修改网页的title
   	}else{
   		document.title = 'vue_test'
   	}
   })
   

4. 独享守卫:

   beforeEnter(to,from,next){
   	console.log('beforeEnter',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('name') === 'xxx'){
   			next()
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next()
   	}
   }
   

5. 组件内守卫：

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