在后臺管理系統(tǒng)中鸭蛙，經(jīng)常需要根據(jù)角色擁有的權限控制頁面中的操作按鈕，實現(xiàn)這個功能筋岛，可使用vue指令統(tǒng)一處理娶视。
一、獲取當前用戶所擁有的權限
因為用戶權限是全局的睁宰，所以就可使用vuex對數(shù)據(jù)進行全局處理肪获，在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文件夾柒傻，文件夾結(jié)構如下：
文件夾結(jié)構.png
hasPermi.js存放我們編寫的指令孝赫，內(nèi)容如下：
/**
* 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內(nèi)容如下：
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>
