v-has 全局按钮权限设置(Vue2)

需求：一些操作按钮默认打开是隐藏的，发送后台请求返回当前登录人的人员类别，前端控制操作按钮权限，动态显示或者隐藏 操作按钮。

首先想到v-has自定义指令，因为当前只是一部分的权限控制，所以就没有放到全局main.js文件中控制，放到页面入口文件定义v-has

首先：store中新增auth.js 。 vuex的好处就是一处更新，全局状态响应式自动更新，所以是必须用到的。auth的值是接口返回的，只需要请求一次，全局使用。

const Auth = {
    state: {
        auth: '',
    },
    mutations: {
        FAULT_AUTH: (state, data) => {
            if (!data) {
                state.auth = ''
                return;
            }
            state.auth = data;
        },
    },
    actions: {

    },
}

export default Auth;

下面是js代码：发起权限接口，获取当前登录人是什么类别

getPermissions() {
      const that = this;
      this.resAuth = "";// 开始之前置空，为了触发v-model 响应式
      // axios
      //   .get("/xxx")
      //   .then((res) => {
      //     console.log(res);
      setTimeout(() => {
        let res = {
          success: true,
          message: "操作成功！",
          code: 0,
          result: 2, //1 ,2  ,3  分别代表不同的人员分类
          timestamp: 1720514437782,
        };
        that.$nextTick(() => {
          that.$set(that, "resAuth", res.result + "");//更新 
          that.$store.commit("FAULT_AUTH", res.result + "");// 把登陆人类别放到vuex中
        });
      }, 1000);
      // })
      // .catch((err) => {
      //   console.log(err);
      //   that.$nextTick(() => {
      //     that.resAuth = "";
      //     that.$store.commit("FAULT_AUTH", "");
      //   });
      // });
    }

在 template中：

<van-button
    v-has="[resAuth, '1,2,3']"
     size="mini"
     type="info"
     plain
     >关闭</van-button
   >
resAuth是一个变量，目的是为了后台请求返回权限数据的时候，更新resAuth的值，从而触发directives中的update方法进行控制显隐。
1,2,3 代表这三类人都可以操作，否则没权限，隐藏掉。


入口vue文件：
```javascript
  directives: {
    has: {
      // bind:function (params) {//第一次绑定执行
      //   console.log('bind----');
      // },
      inserted: function (el, binding) {
        let hasAuth = judgeAuth(binding.value[1]);
        //首次加载后端没返回权限字段的时候，先给按钮隐藏掉。因为是后台异步返回，所以不能在inserted中控制显示。需要在update中显示。在这里发起请求，控制也能实现，弊端就是每一个按钮都要发送一次请求。浪费
        if (!hasAuth) {
          el.style.display = "none";
        }
      },
      update: function (el, binding, vnode) {//当绑定的v-has参数有发生变更的时候，触发update方法 
        // const that = vnode.context;//如果要访问当前vue实例的this，用这个
        let hasAuth = judgeAuth(binding.value[1]);
        if (!hasAuth) {
          el.parentNode && el.parentNode.removeChild(el);
        } else {
          el.style.display = "block";
        }
      },
    },
  },

当前是h5页面，列表需要支持下拉刷新，每次下拉刷新一次，都要执行一遍directives方法，第一次加载正常，下拉刷新一遍，原本有权限的又给隐藏掉了。

刚开始想的是 在store中添加一个hasPermission字段，在update中commit更新，然后在 inserted中 判断store中的hasPermission字段，控制是否隐藏。但是问题是，按钮的操作权限是不同的，有些可以操作，有些不能操作，所以这个不行。只好每次在执行到inserted方法执行中judgeAuth方法判断一次。

judgeAuth方法：

function judgeAuth(authStr) {
  const currentAuth = store.state.faultAuth.auth;
  if (!currentAuth || currentAuth == 0) {
    return false;
  }
  let arr1 = authStr.split(',')
  if (!arr1 || arr1.length == 0) {
    return false;
  }
  let hasAuth = false;
  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] == currentAuth) {
      hasAuth = true;
      break;
    }
  }
  return hasAuth;
}

到此就正确实现了按钮按人员类别控制显隐了。
不知道还有没其他更简单的方法可以实现，有的话，欢迎一起讨论噢