Vue2按钮权限指令

在src/utils下新增directive.js文件

import Vue from 'vue'
import store from '@/store'  // store用于存储用户权限信息

/** 权限指令**/
Vue.directive('has', {
    inserted: function (el, binding) {
        if (!Vue.prototype.$_has(binding.value)) {
            el.parentNode.removeChild(el)
        }
    }
})

/* 权限检查方法
* permissions 指令传递的权限（数组或者单个字符串）
*/
Vue.prototype.$_has = function (permissions) {
    checkArrayOfFun() // 定义Array.of方法
    let btnPermissionsArray = Array.isArray(permissions) ? permissions : Array.of(permissions);
    // 用户登录后存储的权限信息，具体参照存储方式获取
    const userPermissionList = store.state.user.permissions || [] 
    // 未传权限信息默认都可访问
    return !btnPermissionsArray?.length || btnPermissionsArray.some(el => userPermissionList.includes(el))
}

// 兼容旧环境
function checkArrayOfFun () {
    if (Array.of) return
    Array.of = function () {
        return Array.prototype.slice.call(arguments);
    };
}

在main.js中引入import "@/utils/directive.js" 在相应的地方使用<div v-has="minePermission"></div>或<div v-has="['minePermission']"></div>