vue 自定义指令（directive）之 按钮权限

• 第一步在公共方法文件夹创建一个auth.js

//auth.js
/**
 * @description 鉴权指令
 * 当传入的权限当前用户没有时，会移除该组件
 * 用例：<Tag v-auth="['admin']">text</Tag>
 * */
import store from '@/store';
import Cache from '@/utils/cache.js'
/**
 * @description 判断列表1中是否包含了列表2中的某一项
 * 因为用户权限 access 为数组，includes 方法无法直接得出结论
 * */
function includeArray (list1, list2) {
    let status = false;
    if (list1 === true) {
        return true
    } else {
        if (typeof list2 !== 'object') {
            return false;
        }
        list2.forEach(item => {
            if (list1.includes(item)) status = true;
        });
        return status;
    }
}

export default {
    inserted (el, binding, vnode) {
        const { value } = binding;
        const access = JSON.parse(Cache.get('USER_INFO')).access || ['add'] ; //此数据为后台返回数据 可存在vuex里取，也存在浏览器缓存里取
        if (value && value instanceof Array && value.length && access && access.length) {
            const isPermission = includeArray(value, access);
            if (!isPermission) {
                el.parentNode && el.parentNode.removeChild(el);
            }
        }
    }
}

• 第二步 在main.js 里引入 并注册指令

//.main.js
import Vue from 'vue';
import directiveAuth from "@/components/auth.js";

// 指令名字可自定义 
Vue.directive('auth',directiveAuth)

• 第三步 在demo中使用

<template>
  <div>
    <button v-auth="['add']">添加</button>
    <button v-auth="['update']">编辑</button>
    <button v-auth="['delete']">删除</button>
  </div>
</template>