vue+sherio封装一个自定义指令，判断权限

权限验证

封装一个自定义指令，判断是否有该权限，显示页面的按钮

将一下代码引用到main.js里面，在页面直接使用就可以了。

import Vue from "vue";
Vue.directive("has", {

  bind: function (el, binding) {
    //需要在DOM更新完成以后再执行以下代码，不然通过 el.parentNode 获取不到父节点，因为此时还没有绑定到
    Vue.nextTick(function () {
      var role = binding.value.role;
      if (!Vue.prototype.$_has(role)) {
        el.parentNode.removeChild(el);
      }
    });
  },
});
Vue.prototype.$_has = function (role) {
  //当前角色可以从cookie中获取
  var currentRole =JSON.parse(sessionStorage.getItem('perms')) ;
  if (Array.isArray(role)) {
    return currentRole.some(function (ele) {
      return role.indexOf(ele) >= 0;
    });
  } else {
    return currentRole.indexOf(role) >= 0;
  }
};

页面使用

<el-button
          type="primary"
          v-has="{ role: ['cert:apply'] }"
          @click="submitForm('ruleForm')"
          >申请证书</el-button
        >
</el-button>