使用Vue的自定义指令->实现按钮的权限校验__Vue.js__前端

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

这是我参与11月更文挑战的第3天，活动详情查看：2021 最后一次更文挑战

在 vue 项目中，大家是怎么做按钮的权限控制的?在这里,我就来给大家分享一种比较常用,而且很简单的方法,也就是使用 vue 的自定义指令

语法

自定义指令directives 是直接写在 vue 实例上的,和 data，methods 处于同一级。他有五个钩子函数在不同的形式下触发，分别是 bind、inserted、update、componentUpdated、unbind,这次我们只介绍 bind，也就是在页面初始化的时候触发，就像 mounted 一样

template 部分

<el-button v-auth='"aa"'>需要aa权限</el-button>

js 部分

export default {
  data() {
    return {
      msg: "test",
    };
  },

  directives: {
    // auth是自定义指令的名称，可以随便怎么写，比如a,b,c,d，但最好有语义化，有利于代码的维护
    auth: {
      bind(el, binding, vnode) {
        console.log(el); //  <button></button>  打印出button这个dom元素
        console.log(binding);
        //  {
        //    name:'auth',
        //    value:'aa',
        //    xxxx此处省略那些用不到的属性
        //  }
      },
    },
  },
};

auth： 自己定义的事件名称，想咋定义咋定义，但最好有语义化，防止被同事打 bind： 钩子函数的名称，在页面初始化时调用

钩子函数里面有三个参数分别是： el： 自定义事件所绑定的那个 dom 元素 binding： 所有的信息，比如你给指令绑定的参数，和这个指令自己的名字 vnode（可以忽略）： 虚拟 DOM 节点，不用管他，不重要

v-auth 就是自定义指令的用法，v-show、v-if、v-for 啥的都是他的好兄弟，只不过这些是尤大内置的，所以我们才能直接在 vue 项目中使用

Tips： 除了 el 之外，其他两个参数都是只读的，只能看，不能改

使用

知道了自定义指令怎么写之后该怎么拿来做按钮权限控制？

第一步：获取所拥有的权限

首先，用户登录之后通过后端的接口我们可以获取到一个带着该用户所拥有的权限的数组。不是数组的话就是用 js 把他变成一个数组。建议存储到 vuex 里面，我就不演示了

// 假设authList就是接口返回的权限列表
const authList = ["aa", "cc"];

第二步：给按钮绑定权限

给按钮们加上自己的权限

<el-button v-auth='"aa"'>需要aa权限</el-button>
<el-button v-auth='"bb"'>需要bb权限</el-button>
<el-button v-auth='"cc"'>需要cc权限</el-button>

第三步：校验权限，没有权限就隐藏按钮

因为通过 bind 这个钩子函数，我们是可以拿到绑定到按钮上面的权限的名称的，通过第二个参数的 value 属性可以获取到

export default {
  directives: {
    auth: {
      bind(el, { value }) {
        const authList = ["aa", "cc"]; //一般是从vuex里面获取
        const hasAuth = authList.includes(value);
        // 如果没有该按钮的权限，则隐藏该按钮，当然禁用什么的也行，看项目需求
        if (!hasAuth) el.style.display = "none";
      },
    },
  },
};

没错，完了，就是这么简单！