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

该文主要是利用vue自定义属性来实现按钮级别的权限，代码直接copy进项目即可使用

一、在utils文件夹下新建authority.js

/**
 * 检查权限点工具函数
 * @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:

Authority.js

// import store from '@/store';
import { checkAuthority } from '@/utils/authority';

export default {
  inserted(el, binding, vnode) {
    const { value } = binding;
    // 如果登录后获取到的权限点存在了store，即从store取
    // const permissions = (store.getters && store.getters.permissions) || [];
    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);
    }
  }
};

index.js

import authority from './Authority';

const install = function(Vue) {
  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
  v-authority="['Pc_BHud_Write']"
  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