Vue 2.x - 指令 - 按钮级别权限控制

本文将通过自定义指令，实现按钮级别的权限控制

页面代码：

<el-button v-hasPermission="'add'">新增</el-button>

JS 代码：

// src/directives/btnPermission.js

import Vue from "vue"
import store from "xxx/store"

/* 按钮权限指令 */
const hasPermission = Vue.directive('hasPermission', {
	// bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
	// inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
    // 此处应该用 inserted，否则，下面的 el.parentNode 获取的值为 null
	inserted: function(el, binding, vnode) {
        // 通过 _permissionKey 去 vuex 中获取
        let hasPermission = store.getters.hasPermission(binding.value);
        if (!hasPermission) {
            el.parentNode.removeChild(el);
        }
    }
})