最近做的一個后臺系統(tǒng),要求權限控制到按鈕級別,也就是說對于不同的用戶,可操作的按鈕是不一樣的,換言之,有些按鈕對某些客戶是不可見的.例如:用戶A能看到"新增"按鈕,而用戶B看不到,假設"新增"按鈕"的權限是"sys:add",
這里提供兩種解決辦法:1.定義一個全局方法,配合v-if實現(xiàn);2.使用自定義指令;(以下詳述)
1.定義一個全局方法,配合v-if實現(xiàn);
在用戶登錄成功后,獲取用戶的按鈕權限(數(shù)組格式),存儲到store中
定義公共函數(shù)hasPermission
在main.js中引入,
在需要的按鈕上使用即可
2.自定義指令
directives 在全局main.js中注冊
路由配置：
{
????? path:'/permission',
????? component: Layout,
????? meta: { btnPermissions: ['admin','supper','normal'] //頁面需要的權限
},
自定義指令：
/**權限指令**/
const has = Vue.directive('has', { bind: function (el, binding, vnode) {???
? // 獲取按鈕權限
?? let?? btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");??
?? if(!Vue.prototype.$_has(btnPermissions)) {????????
??????? el.parentNode.removeChild(el);????
?? }
}});
// 權限檢查方法
Vue.prototype.$_has = function (value) {
???? let isExist =false;
???? let btnPermissionsStr = sessionStorage.getItem("btnPermissions");???
???? if(btnPermissionsStr == undefined || btnPermissionsStr ==null) {?????????
????????? return? false;???
????? }??
???? if(value.indexOf(btnPermissionsStr) > -1) {??????
????????? isExist =true;???
????? }
???? returnisExist;
}
export {has};
/*然后在main.js文件引入文件*/
importhas from'./public/js/btnPermissions.js';
/*頁面中按鈕只需加v-has即可*/
以上,方法一親測有效,方法二借鑒的,未能實踐...
