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