//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
import Vue from 'vue';
import directiveAuth from "@/components/auth.js";
// 指令名字可自定义
Vue.directive('auth',directiveAuth)
<template>
<div>
<button v-auth="['add']">添加</button>
<button v-auth="['update']">编辑</button>
<button v-auth="['delete']">删除</button>
</div>
</template>
