根据后台权限返回值显示按钮

最新推荐文章于 2024-03-01 22:50:20 发布

nuanxiaofeng03

最新推荐文章于 2024-03-01 22:50:20 发布

阅读量320

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_49718098/article/details/119207949

版权

该博客介绍如何在Vue应用中通过全局自定义指令`v-has`实现权限判断，根据后台返回的权限值动态显示或隐藏按钮。在main.js中定义指令，插入时检查权限，利用localStorage存储的权限列表进行比较，如果用户无权限则移除元素。此方法有助于实现前端的细粒度权限管理。

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

根据后台权限返回值显示按钮
在main.js中全局自定义指令。然后在页面中引用

Vue.directive('has', {
  inserted: function(el, binding) {
    // console.log(el,'----',binding.value);
    // console.log(localStorage.getItem('authList'),'====');
      if (permissionJudge(binding.value)) {
          el.parentNode.removeChild(el);
      }
    function permissionJudge(value){
      let authCode = value.split('-')
      // console.log(authCode,'authCode----');
      let list = JSON.parse(localStorage.getItem('authList'));
      let flag = true;
      list.forEach(el => {
      //先判断返回值authCode 值与自定义指令传的值是否一致
        if(el.authCode == authCode[0]){
        //判断返回haveCurrAuthFlag，1为无权限，2为有权限 
          if(el.haveCurrAuthFlag == 2){
            flag = false
          }
        }
      });
      return flag;
    }
  }
})