Vue自定义指令实现按钮级的权限控制

提示：原文参考链接＊且听风吟

---

一、自定义指令—钩子函数

提示：钩子函数：

自定义指令有五个生命周期（也叫钩子函数），分别是：bind,inserted,update,componentUpdated,unbind。

• bind：只调用一次，指令第一次绑定到元素时调用。用这个钩子函数可以定义一个绑定时执行一次的初始化设置。（ bind 时父节点为null，因为 bind 是在 dom 树绘制前调用）

• inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中，在 dom 树绘制后调用）。

• update：被绑定于元素所在的模板 vNode 更新时调用，但是可能发生在其子 vNode
  更新之前。指令的值可能发生了改变，也可能没有。可以通过比较更新前后的绑定值，来忽略不必要的模板更新。

• componentUpdated：被绑定元素所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

二、钩子函数参数？

钩子函数参数说明，自定义指令中传递的常用参数：

1. el： 指令所绑定的元素，可以用来直接操作 DOM。
2. binding： 一个对象，包含指令的很多信息。如下：

• name：指令名，不包括 v- 前缀。

• value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。

• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

• expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。

• arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。

• modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

• vnode：Vue编译生成的虚拟节点。

• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

  除了 el 之外，其它参数都应该是只读的。

---

三、全局自定义指令

实现原理

在 el-button 按钮上设置标签数值，利用 vue的指令功能获取按钮实例对象和按钮上绑定的标签数值，与从接口拿到的按钮权限数据进行匹配，如果匹配成功，证明用户拥有该按钮的使用权限，如果发现没有使用权限，则在指令处理函数中编写代码移除该按钮，界面上就看不到该按钮了。

封装组件

在 src 目录下新建 directive 目录，在目录下新建 permission.js 文件：

代码如下：

import Vue from 'vue';
// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export const permissions = Vue.directive('permission',{
    /**
     * inserted：被绑定元素插入父节点时调用 
     * el：指令所绑定的元素，可以用来直接操作 DOM
     * binding.value：指令的绑定值，例如：v-directive="10" 中，绑定值为 10。
     */
    inserted(el,binding){
        let buttonKey = binding.value;
        // 代表某个元素需要通过权限验证
        if(buttonKey){
            let key = checkKey(buttonKey)
            if(!key){//没有权限
                el.remove()  //删除按钮
            }
        }else{
            throw new Error('缺少唯一指令')
        }
    },
}) 
 
// 检测传入的元素key是否可以显示
function checkKey(key) {
    // 获取权限数组
    let permissionData = sessionStorage.getItem("permissionData") ? sessionStorage.getItem("permissionData") : [] ;
    //如果传入的元素key不在权限数组里，则不可显示
    let index = permissionData.indexOf(key)
    if(index > -1) {
        return true;
    }else{
        return false;
    }
}
 

引入组件

在入口文件 src\main.js 里面引入自定义指令：

import permission './directive/permission'
Vue.use(permission)

使用组件

在使用的页面，按钮中只需引用v-operate指令，赋值判断即可：

<el-button @click='delHandle' type="primary" v-permission="'delete'">删除</el-button>