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

置顶 Faith_ZL

于 2020-11-12 15:23:05 发布

阅读量278

点赞数

文章标签： vue shiro

本文链接：https://blog.youkuaiyun.com/qq_43575827/article/details/109644633

版权

本文介绍了一种基于Vue.js的自定义指令实现方法，用于前端权限验证。通过该指令可以在页面上动态控制按钮等元素的显示与否，具体实现涉及Vue的生命周期钩子及自定义指令绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

权限验证

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

将一下代码引用到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>