Vue学习笔记-路由守卫

2023-12-14 04:04:32

作用

对路由进行权限控制

分类

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

  1. 全局守卫(beforeEachafterEach),写在路由配置项的最后(/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. 组件内守卫(beforeRouteEnterbeforeRouteLeave),写在组件文件中(xxx.vue)
    触发的必要条件:必须是通过路由规则进行切换时
    //通过路由规则,进入组件时调用
      beforeRouteEnter(to,from,next){
    	......
      },
      //通过路由规则,离开该组件时调用
      beforeRouteLeave(to,from,next){
    	......
      }
    

文章来源:https://blog.csdn.net/theLuckyLong/article/details/134825940
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。