Vue自定义指令实现按钮级别权限

/** * 检查权限点工具函数 * @param {*} permissionCode 元素权限点 * @param {*} permissions 所有权限点 */export function checkAuthority(permissionCode, permissions) {  let hasPermission = true;  if (permissionCode) {    if (permissionCode instanceof Array && permissionCode.length > 0) {      hasPermission = permissions.some(permissions =>        permissionCode.includes(permissions)      );    } else {      hasPermission = permissions.some(item => item === permissionCode);    }  }  return hasPermission;}

二、src文件下新建directive文件夹，随之再建立Authority文件夹，并在其下新建Authority.js文件和index.js文件，

// import store from '@/store';import { checkAuthority } from '@/utils/authority';export default {  inserted(el, binding, vnode) {    const { value } = binding;    // const permissions = (store.getters && store.getters.permissions) || [];  如果是存在store，则取store里面的权限点    const permissions = JSON.parse(localStorage.getItem('permissionData')) || []    const hasPermission = checkAuthority(value, permissions);    if (!hasPermission) {      // eslint-disable-next-line no-unused-expressions      if (el.parentNode) {        el.parentNode.removeChild(el);      } else {        el.innerHTML = '';      }    } else {      el && el.setAttribute('code', value);    }  }};

2.index.js文件代码：

  Vue.directive('authority', authority);};if (window.Vue) {  window.authority = authority;  Vue.use(install); // eslint-disable-line}authority.install = install;export default authority;

（备注： 权限点集合permissionData在登录时已经存到localStorage里面了，取值，直接JSON.parse(localStorage.getItem('permissionData'))）

三、main.js文件里引入：

import AuthorityDirective from '@/directive/Authority/index.js';  // 自定义指令
Vue.use(AuthorityDirective);

四、使用：

<el-button type="primary" v-authority="['Table_Write']">show</el-button>

五、判断是否有权限

在计算属性定义：

isHavePermission() {  return checkAuthority('Pc_BHud_Write', this.permissions);}

使用：

<el-table-column  label="Action"  width="70px"  v-if="(btnStatus == 'write' || btnStatus == 'verify') && isHavePermission"> <template slot-scope="scope">  <i class="hiconfont action hicon-delete text-danger" @click="deleDebitRowData(scope.row, scope.$index)"></i> </template></el-table-column>

补充：

权限点集合是一个纯数组集合，该数据模拟从后台获取到的数据：

permissionData = [  'Table_Write',  'Table_Read',  'Form_Write',  'Form_Read']

获取到后，在登录时立即存入localStorage。