在后台管理项目上经常要求权限控制到按钮级,既如果当前登录用户没有新建、编辑、删除等权限就无法看到对应的功能按钮,这种需求可以使用vue的自定义指令实现
首先针对自定义指令进行封装
在util文件夹内新建permission.js
import Vue from 'vue'
import store from '../index'
// 定义自定义指令
const has = Vue.directive('has', {
bind: function (el, binding, vnode) {
if (!Vue.prototype.$_has(binding.value)) {
let className = el.getAttribute('class')
if (className) {
className = className.concat(' hiddenHandle')
} else {
className = 'hiddenHandle'
}
el.setAttribute('class', className)
}
}
})
// 定义用户权限检查方法
Vue.prototype.$_has = function (value) {
let isExist = true
const arrPermission = value.split(',')
// 从vuex中获取用户的具体权限列表
const PermissionsStr = store.getters.roles.permissionList
if (PermissionsStr === undefined || PermissionsStr == null) {
return false
}
arrPermission.forEach(item => {
if (PermissionsStr.indexOf(item) === -1) {
isExist = false
}
})
return isExist
}
export default has
在main.js中引入,保证可以全局使用
import has from './util/permission'
Vue.use(has)
在全局样式中定义hiddenHandle为吟唱
.hiddenHandle{
display: none !important;
}
在页面中的使用
<a-button v-has="'sys_role_add'" type="primary" icon="plus" @click="add">新建</a-button>