在后台管理系统中，经常需要根据角色拥有的权限控制页面中的操作按钮，实现这个功能，可使用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>
