vue的addRoutes

后台登录页面需要写角色和权限两个页面，这里要根据用户登录时，判断是否有权限显示左侧的信息。我用了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;
            }
         }

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