Vue多页面 按钮级别权限控制 directive指令控制

利用driective 构建自己的指令，实现按钮级别权限

项目结构如下：

修改router.js

{
path: 'schools',
name: '列表',
component: () => import('./eduAdministration/SchoolList'),
meta: {
permissions: ['schools'],
btnpermissions:['admin','test'],
title: '列表',
icon: '',
scrollToTop: true
}
},

新建文件 btnPermission.js文件

内容如下

import Vue from 'vue'
import store from '../index'
/**权限指令**/
const has = Vue.directive('has', {
bind: function (el, binding, vnode) {
// 获取按钮权限
let Permissions = vnode.context.$route.meta.btnpermissions;
console.log('permission',Permissions)
if (!Vue.prototype.$_has(Permissions)) {
let className=el.getAttribute("class")
className=className.concat(" hidden")
el.setAttribute("class",className)
}
}
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
let isExist = false;
debugger
let PermissionsStr =store.getters.roles;
if (PermissionsStr == undefined || PermissionsStr == null) {
return false;
}

PermissionsStr.forEach((per)=>{
if (value.indexOf(per) > -1) {
isExist = true;
}
})
return isExist;
};
export {has}

将文件引入index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import getters from './getters'
import permission from './modules/permission'
import has from './modules/btnPermission'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
user,
permission
},
getters
})

export default store

页面添加权限

el-button(size='mini' @click="handleEdit(scope.row)" v-has) 编辑

最后一步

在 css中添加hidden样式

<style scoped>
.hidden {
display:none;
}
</style>

大功告成