vue(abp)使用自定义指令实现按钮(任意元素)权限过滤

在使用vue(后端abp)开发中，需要根据权限对按钮进行显示隐藏，问下了公司大神（开发过angular的，可以使用自定义指令），vue应该也有对应的方式，毕竟天下代码差(一)不(大)多(抄);

---

添加自定义指令

在main.ts中添加如下自定义指令

Vue.directive('role', {
  inserted: function (el,binding) {
    //支持权限数组["Permission1","Permission2",true],最后一个boolean类型参数可选，表示是同时满足还是满足任意一个
    if (typeof binding.value ==="object") {
      let length=binding.value.length-1;
      if(typeof(binding.value[length])==="boolean"&&binding.value[length]===true){
          //必须满足全部权限
        if(!binding.value.slice(0,length).every(i=>Util.abp.auth.hasPermission(i))){
            el.parentNode.removeChild(el);
        }
      }else{
        if(typeof(binding.value[length])==="boolean")
        {
            length=length-1;
        }
        if(!binding.value.slice(0,length).some(i=>Util.abp.auth.hasPermission(i))){
        el.parentNode.removeChild(el);
       }
      }
    }
    //权限字符串
    else{
      if (!Util.abp.auth.hasPermission(binding.value)) {
            el.parentNode.removeChild(el);
          }
    }
    // console.log(el,binding);
  }
})

使用方法

<Button @click="create" icon="android-add" type="primary" v-role="'UploadList'">一个权限</Button>
<Button @click="create" icon="android-add" type="primary" v-role="['UploadList','UploadList1']">满足多个权限中任意一个</Button>
<Button @click="create" icon="android-add" type="primary" v-role="['UploadList','UploadList1',true]">多个权限全部满足</Button> 
            

---

参考资料

自定义指令

本文会经常更新，请阅读原文： https://dashenxian.github.io/post/vue%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E5%AE%9E%E7%8E%B0%E6%8C%89%E9%92%AE%E6%9D%83%E9%99%90%E8%BF%87%E6%BB%A4 ，以避免陈旧错误知识的误导，同时有更好的阅读体验。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名 小神仙 （包含链接： https://dashenxian.github.io ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 (125880321@qq.com) 。