基于Vue的动态菜单和视图控制

前言

在前一篇文章中我通过addRoutes的方法实现了路由层面的权限控制，具体看基于Vue的addRoutes实现权限控制一文。本篇将着重介绍不同权限的菜单栏动态生成的方法以及不同权限渲染不同的控件。

动态生成菜单

在后台登录接口仅仅只返回给我当前登录账号权限的情况下，因为菜单和路由其实是一一对应的关系，所以在编写路由表的时候就给路由添加了相应的菜单属性

export const dynamicRouter =[ //动态路由
  {
    path: '/',
    name: 'home',
    meta: {  //添加meta标签，里面自定义了roles，用来设置权限
      roles:['admin','user'], //该路由仅admin和user权限访问
    },
    component: (resolve) => require(['../components/home.vue'], resolve)
  },
  {
    path:'/home21',
    name:'home222',
    meta:{
      roles:['user'],
      menu: ['普通用户'] //menu表示菜单内容
    },
    component: (resolve) => require(['../components/home21'], resolve)
  },
  {
    path:'/home11',
    name:'home111',
    meta:{
      roles:['admin'],
      menu: ['管理员']
    },
    component: (resolve) => require(['../components/home11'], resolve)
  },
];

所以登录界面的逻辑不仅仅是动态添加路由了，还得将对应的菜单信息通过Vuex保存下来，方便后面的home页能够获取到菜单

let dR = new Array(); //这里省略了一部分代码，需要查看完整代码可以参考前一篇博客
      for (let i=0;i

接下来主页想要动态生成菜单的话用v-for渲染即可

到这里你就已经可以根据不同权限生成相应的菜单栏了

视图控制

这里的视图控制简单举个例子就是一个“删除”按钮，管理员登录后可以看到而普通用户登录后缺看不到，也就是管理员可以编辑而普通用户只能查看。

看到这，你对视图是否显示的第一反应是不是通过v-if或者v-show来控制的？

这里我推荐使用自定义指令的方法来操作：

Vue.directive('has', {
  update: function(el, binding) {
    if (store.state.roles != binding.value) //如果权限不匹配 那就不渲染此控件
      el.parentNode.removeChild(el);
  }
});

调用自定义指令：

管理员专属按钮

data () {
        return {
          admin:'admin'
        }

}

这里的逻辑是该按钮仅仅管理员可以看到，在自定义指令的回调函数里接收到“admin”并和Vuex里保存的当前登录账号的权限进行比较。

这里之所以用自定义指令而不用v-if是因为：v-if的特点是会响应数据变化，因此随着应用的运行会频繁触发权限校验，而权限在应用的整个生命周期其实只需要校验一次，为了避免无谓的程序执行可以使用自定义指令。

总结

看到这里，我们已经实现了路由权限控制和视图权限控制，至于请求层面的控制只要通过请求拦截就可以实现，这里就不细说，如果文章对你有用，请给我点个赞，也是对我莫大的鼓励=V=。