Vue学习笔记-路由守卫

作用

对路由进行权限控制

分类

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

1. 全局守卫(beforeEach、afterEach)，写在路由配置项的最后(/router/index.js)

   //创建一个路由器
   const router = new VueRouter({
   	routes:[
   		{
   			name:'aboutName',
               path:'/about',
               component:AboutVue,
               //用户自定义元数据可以存放在meta属性中
               meta:{
               	isAuth:true,
               	title:'关于界面',
               	......
               }
   		},
   		......
   	]
   });
   //(全局前置路由守卫)-设置在每次切换路由之前，以及路由初始化的时候，都需要调用的函数
   router.beforeEach((to, from, next)=>{
       /*
        to:即将去往的路由组件相关信息对象（“要到哪里去”的信息）
        from:来自于的路由组件相关信息对象（“你从哪里来”的信息）
        next:放行函数
   	*/
       if(to.meta.isAuth){//判断是否需要鉴权
           if(localStorage.getItem('userName') === 'handsomeBoy'){
               next();
           }else{
               alert('检测到当前用户名不满足要求')
           }
       }else{
           next();
       }
   });
   //(全局后置路由守卫)-路由初始化的时候，以及切换路由之后被调用
   router.afterEach((to,from)=>{
      if(to.meta.title){//如果为to组件配置了title,则修改网页的title
      	 document.title = to.meta.title
      }else{
      		document.title = '默认title'
      }
   });
   

2. 独享守卫(beforeEnter)，写在某些路由组件配置项内部（/router/index.js）
   顾名思义，就是专门为某个路由组件配置的控制逻辑

   {
       name:'newsName',
       path:'news',/*二级路由不用写斜杠*/
       component:NewsVue,
       //设置路由元数据（自己定义k-v）
       meta:{
          isAuth:true,
       },
       //独享路由守卫,当切换进入当前路由前触发
       beforeEnter(to,from,next){
           //放行函数
           if(to.meta.isAuth){//判断是否需要鉴权
               if(localStorage.getItem('userName') === 'handsomeBoy'){
                     next();
               }else{
                     alert('检测到当前用户名不满足要求')
                   }
          }else{
             next();
          }
      },
   },
   

3. 组件内守卫(beforeRouteEnter、beforeRouteLeave)，写在组件文件中(xxx.vue)
   触发的必要条件：必须是通过路由规则进行切换时

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