在后台管理系统中，经常需要根据角色拥有的权限控制页面中的操作按钮，实现这个功能，可使用vue指令统一处理。

一、获取当前用户所拥有的权限

因为用户权限是全局的，所以就可使用vuex对数据进行全局处理，在store/index.js中代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import { getAuthSubMenusAndButton } from '@/api/configuration.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    permissionList: [], // 拥有的权限
  },
  mutations: {
    set_permissionList(state, permissionList) {
      state.permissionList = permissionList;
      localStorage.setItem('CONFIG_PERMISSION', JSON.stringify(permissionList));
    }
  },
  actions: {
    getPermission: ({commit}) => {
      return new Promise(async (resolve, reject) => {
        const res = await getAuthSubMenusAndButton({
          modelType: 72
        });
        if (res && res.suc == 1) {
          let permissionList = res.obj && res.obj.length ? res.obj : [];
          commit('set_permissionList', permissionList);
          resolve(res);
        } else {
          reject(res);
        }
      })
    },
  },
  modules: {
  }
})

二、编写指令

在src目录下新建一个directive文件夹，文件夹结构如下：

文件夹结构.png

hasPermi.js存放我们编写的指令，内容如下：

/**
 * v-hasPermi 操作权限处理
 */

 import store from '../../store';

 export default {
   inserted(el, binding, vnode) {
     const { value } = binding
     const all_permission = "*:*:*";
     const permissions = store.state.permissionList.length ? store.state.permissionList : JSON.parse(localStorage.getItem('CONFIG_PERMISSION'));
 
     if (value && value instanceof Array && value.length > 0) {
       const permissionFlag = value
 
       const hasPermissions = permissions.some(permission => {
         return all_permission === permission || permissionFlag.includes(permission)
       })
 
       if (!hasPermissions) {
         el.parentNode && el.parentNode.removeChild(el)
       }
     } else {
       throw new Error(`请设置操作权限标签值`)
     }
   }
 }

directive/index.js内容如下：

import hasPermi from './permission/hasPermi'

const install = function(Vue) {
  Vue.directive('hasPermi', hasPermi)
}

if (window.Vue) {
  window['hasPermi'] = hasPermi
  Vue.use(install); // eslint-disable-line
}

export default install

三、使用方式

main.js中引入指令:

import Directive from './directive';
Vue.use(Directive);

vue文件中使用:

<el-button v-hasPermi="['system:pageset:save']" class="save-btn" type="primary" @click="saveData">保存</el-button>