vue的addRoutes

墨蓝 2023-05-31 07:05 1阅读 0赞

后台登录页面需要写角色和权限两个页面，这里要根据用户登录时，判断是否有权限显示左侧的信息。我用了vuex存储动态路由的信息，因为一个页面只能export default一个，所以存到了vuex里，好几个页面需要用到。然后我只想让admin和boss两个用户登录之后，显示出来管理的页面，其他的只能进入首页。

### 1 vuex里的动态路由 ###

state:{
        token:window.localStorage.getItem('token') || null,
        userId:window.localStorage.getItem('userId') || '',
        //动态路由
        dynamicRouter:[
            {
                path: '/home',
                component: resolve=>require(['../components/common/home.vue'],resolve),
                meta:{
                    title:'首页',
                    requireAuth: true,
                    roles:['admin','boss']
                }
            },
            {
                path: '/personList',
                component: resolve=>require(['../components/page/personList.vue'],resolve),
                meta:{
                    title:'员工列表',
                    requireAuth: true,
                    roles:['admin','boss']
                }
            },
            {
                path: '/permissionList',
                component: resolve=>require(['../components/page/permissionList.vue'],resolve),
                meta:{
                    title:'权限管理',
                    requireAuth: true,
                    roles:['admin','boss']
                }
            },
            {
                path: '/roleList',
                component: resolve=>require(['../components/page/roleList.vue'],resolve),
                meta:{
                    title:'角色管理',
                    requireAuth: true,
                    roles:['admin','boss']
                }
            },
            {
                path: '/visitorList',
                component: resolve=>require(['../components/page/visitorList.vue'],resolve),
                meta:{
                    title:'访客管理',
                    requireAuth: true,
                    roles:['admin','boss']
                }
            },
            {
                path: '/InOutList',
                component: resolve=>require(['../components/page/InOutList.vue'],resolve),
                meta:{
                    title:'进出入管理',
                    requireAuth: true,
                    roles:['admin','boss']
                }
            }
         ]
      },

roles里写的是有权限登录管理页面的用户名。

### 2 在index登录页面 ###

//创建一个数组用来存储符合权限的路由
                        let dR = new Array(); 
                        //第一层循环遍历动态路由表的每一个路由
                        for (let i=0;i<_this.dynamicRouter.length;i++){
                            //第二次循环遍历每一个路由里的roles设置的权限并和当前登录账号的权限比较    
                           for (let j=0;j<_this.dynamicRouter[i].meta.roles.length;j++){          
                               if (_this.dynamicRouter[i].meta.roles[j] == _this.ruleForm.username){           
                                  dR.push(_this.dynamicRouter[i]); //符合条件的路由信息就放进数组里
                                }        
                            }      
                        }
                        
                         //一定要把重定向再写一遍
                        router.addRoutes(dR.concat([{
                            path:'*',
                            redirect:'/error'
                        }]));
    
                        //添加完路由后默认跳到首页
                        router.push('/home');

### 3 app.vue ###

因为防止刷新之后，路由发生变化，所以这里要在入口组件中再写一遍代码

created(){
          _this=this;
          _this.dynamicRouter=store.state.dynamicRouter;
          let isLogin = store.state.token;
          let dR = new Array(); //创建一个数组用来存储符合权限的路由
          if(!isLogin){
             _this.$router.push('/index');
          }else{
                for (let i=0;i<_this.dynamicRouter.length;i++){ //第一层循环遍历动态路由表的每一个路由        
                    for (let j=0;j<_this.dynamicRouter[i].meta.roles.length;j++){ //第二次循环遍历每一个路由里的roles设置的权限并和当前登录账号的权限比较          
                        if (_this.dynamicRouter[i].meta.roles[j] == localStorage.getItem('username')){ //这里因为我默认账号名就是当前用户的权限           
                            dR.push(_this.dynamicRouter[i]); //符合条件的路由信息就放进数组里
                        }        
                    }      
                }
                router.addRoutes(dR);
          }
      },

###  4 在slide.vue页面 ###

上面的写完之后，只能是路由没有了，但是菜单还有显示。所以需要在菜单页面渲染一下哪些路由应该在什么时候消失。

//判断菜单是否显示
             getJudge(){
                var arr=[];
                for (let i=0;i<_this.dynamicRouter.length;i++){ //第一层循环遍历动态路由表的每一个路由        
                    for (let j=0;j<_this.dynamicRouter[i].meta.roles.length;j++){//第二次循环遍历每一个路由里的roles设置的权限并和当前登录账号的权限比较          
                        arr.push(_this.dynamicRouter[i].meta.roles[j])  
                    }      
                }
                if(arr.indexOf(localStorage.getItem('username')) > -1){
                    _this.show=true;
                }else{
                    _this.show=false;
                }
             }

这样就可以动态的控制路由了。以后还会有补充。