vue 按钮权限的控制

在后台管理项目中，往往会有多种角色的人员操作系统，这时就需要对每种角色进行分权限，我们简单讲下按钮级别的权限前端的实现思路，菜单权限鉴定请看

1.页面展示需要鉴权的所有按钮，像有些查询功能的接口可直接用菜单控制权限，即可显示菜单即可查看数据。

2.勾选每个角色或者用户所能看的权限保存在数据库。该权限数据是一个权限字段的数组。

3.在main.js中定义判定按钮权限数据的方法，一般为vue的指令directive，登入时获取后端保存的数据权限数组。

4.在每个按钮中调用该指令，并传入该操作的权限字段和后端保存的权限字段进行匹配，能匹配则该操作按钮可显示。

具体代码为：

登录成功后，获取后台返回所有的按钮权限,存到sessionStorage中

getUserAuthTree() {
  this.$ajax.get("/auth/getUserAuthTree").then(res => {
        let authority = r.data.data; 
       window.sessionStorage.setItem('authority', authority);
      });
}

在main.js中自定义指令

/** 权限指令,对按钮权限的控制 **/
Vue.directive('has', {
    bind: function(el, binding) {
        if (!Vue.prototype.$_has(binding.value)) {
            el.style.display="none";
        }
    }
})
// 权限检查方法（且把该方法添加到vue原型中）
Vue.prototype.$_has = function(value) {
    let isExist = false
    // 从浏览器缓存中获取权限数组（该数组在登入成功后拉取用户的权限信息时保存在浏览器的缓存中）
    var buttonpermsStr = sessionStorage.getItem('authority')
    if (buttonpermsStr === undefined || buttonpermsStr == null) {
        return false
    }
    if (buttonpermsStr.indexOf(value) > -1) {
        // 若在按钮中定义的权限字段能在后端返回的权限数组中能找到，则该按钮可显示
        isExist = true
    }
    return isExist
}

定义指令，如果用户含有此按钮权限，则在页面显示出来( v-has绑定进行逻辑判断 )

 <el-button
                  v-has="'fileUpload'" <!-- 在按钮上直接写上v-has="后台返回值" -->
                  class="btnUpload"
                  icon="iconfont icon-shujuxiazai"
                  @click="uploadBtnChange"
          >上传</el-button>

数组有该字段可显示，无该字段则不显示