vue权限处理

vue 权限处理

最近在做关于vue的权限处理的内容，做完之后来总结一下
关于此次vue权限我主要分为三个模块来讲解

• 1.菜单权限
• 2.按钮显示权限
• 3.路由跳转权限

整体思路: 登录–>获取用户信息，菜单以及对应的功能code。所谓功能code就是每一功能都对应的一项功能，如下图所示，对于公寓管理模块，我只有查看的功能,code为 apartment_view,我们登录的时候后台会返给我们一系列的code,[‘apartment_view’,‘apartment_add’],如果我们的code可以在该code列表中找到，即可以匹配功能；还有就是路由拦截，首先把我们的路由去匹配大菜单，如果匹配得到，那就直接路由跳转，如果匹配不大，那就去看功能菜单里是否可以访问通过，比如apartment_add功能对应的页面有多个，如：“add_step1”,“add_step2”,“add_step3”,只要我们能通过url找到对应的code,再和权限code进行对比即可，下面将详细的去说明以及代码

1.菜单权限

菜单权限比较简单 就是正常的根据权限配置的路由菜单，登录的时候又后端返回list，然后渲染到菜单，在这里就不重点提出了

2.按钮显示

这里的按钮权限主要是通过后台返回的code，比如新增文章是add_code，这个时候我们是通过绑定了自定义指令去判断后台返回的code是否包含该code,如果不包含，即移除该元素 ，代码如下

// 绑定权限code
<button v-has="'add_code'">新增文章</button>
// 多code通过-去连接
<button v-has="'add_code-delete_code'">新增文章</button>
// 自定义指令
import Vue from 'vue'
import {
    Base64 } from 'js-base64'
/**权限指令**/
const has = Vue.directive('has', {
   
  inserted: function (el, binding, vnode) {
   
    // 获取页面按钮权限
    if (!Vue.prototype.$_has(binding.value)) {
   
      // 不满足条件 移除该元素
      el.parentNode.removeChild(el);
    }
  }
});
// 权限检查方法
Vue.prototype.$_has =