Vue实现按钮级别权限
我这里分为了两种，先上图：
修改、删除使用的是vue指令实现，操作 这一列使用的是v-if。
ui组件使用的是element_table组件。
准备工作：
首先，我们需要有一个所有的btn权限的list，重置好变量即可：
const BtnList = {
getRoleList: "/sys/role/getRoleList",
getMenuAreaBtnTree: "/sys/role/getMenuAreaBtnTree",
addRole: "/sys/role/addRole",//新增角色
getUserRole: "/sys/user/getUserRole",
updateRole: "/sys/role/updateRole",//修改角色
deleteRole: "/sys/role/deleteRole",//删除角色
updateUserRole: "/sys/user/updateUserRole",//更新用户角色
}
export default BtnList
//使用：
import BtnList from '@/utils/btnPermissions/BtnPermission'
//挂载到Vue实例上
// 所有的btn权限list
Vue.prototype.$BtnList = BtnList
一、第一种使用的是vue指令。
定义自定义指令：
/*
* @Descripttion:
* @version:
* @Author: ZhangJunQing
* @Date: 2022-07-11 17:24:19
* @LastEditors: ZhangJunQing
* @LastEditTime: 2022-07-22 09:55:35
*/
import store from '@/store'
const permission = {
inserted(el, binding, vnode) {
// console.log(binding,'binding')
/*el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。*/
const {
value } = binding
// 在登录后就可以缓存当前用户的btn权限。
// sessionStorage.setItem('ButtonPermissions',JSON.stringify(['role:add']))
// 自定义指令的执行函数，，取到登录缓存的按钮权限数组，赋值给全局对象userMsg
global.ButtonPermissions = store.state.home.checkBtn
// global.ButtonPermissions = JSON.parse(sessionStorage.getItem('ButtonPermissions'))
if (global.ButtonPermissions && global.ButtonPermissions.indexOf(value) < 0) {
el.style.display = 'none'
}
}
}
// 全局注册自定义指令
const install = function (Vue) {
Vue.directive('permission', permission)
}
if (window.Vue) {
window['permission'] = permission
Vue.use(install); // eslint-disable-line
}
permission.install = install
export default permission
// v-permission="aaaaa"
Vue.directive自定义指令：该指令可以写一个自定义的事件*
自定义指令中传递的三个参数
el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
自定义指令的生命周期
自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
1 inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
2 update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
3 componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
4 unbind:只调用一次，指令与元素解绑时调用。
使用：
import BtnPermissionDirectives from '@/utils/btnPermissions/BtnPermissionDirectives'
// 注册按钮权限 自定义指令
Vue.use(BtnPermissionDirectives)
在页面中使用：
<el-table-column
label="操作"
align="center"
>
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-edit"
@click="UpdateRoleManageFun(scope.row)"
v-permission="$BtnList.updateRole"
>修改</el-button
>
<el-button
type="text"
icon="el-icon-delete"
class="red"
@click="handleDelete(scope.row)"
v-permission="$BtnList.deleteRole"
>删除</el-button
>
</template>
</el-table-column>
上述过程即可实现自定义指令控制按钮的显示隐藏。
一、第二种使用的是v-if配合自定义方法。
CBF 方法
// checkUserIsHasFun
// 使用
// v-if="$CBF($BtnList.updateUserRole + '+=+' + '111')"
export const CBF = (value) => {
let checkBtnList = store.state.home.checkBtn
// +=+
// 如果需要两个权限变量配合显示与否
// 传入的时候请使用 +=+ 拼接
// 例如： v-permission="$BtnList.updateUserRole+''+$BtnList.updateUserRole"
if (value.indexOf('+=+') !== -1) {
// 存在双层关系
// 两个都不在btn权限list里面的时候才会 display === none
// 有一个的时候就显示 也就是啥也不做......
let valueArr = value.split('+=+')
// for
// let booleanFlag = valueArr.every(item =>
// checkBtnList && checkBtnList.indexOf(item) < 0
// )
// if (!booleanFlag) {
// return true
// }
// return false
return !valueArr.every(item =>
checkBtnList && checkBtnList.indexOf(item) < 0
)
} else {
if (checkBtnList && checkBtnList.indexOf(value) < 0) {
return false
}
return true
}
}
挂载到vue实例上
import BtnList, {
CBF } from '@/utils/btnPermissions/BtnPermission'
// 主要用于表格列属性
// 例如 下面有一个修改、一个删除 两个按钮
// 只有两个按钮的权限都为false的时候
// 才会将这一列隐藏
Vue.prototype.$CBF = CBF
页面使用：
<el-table-column
label="操作"
v-if="$CBF($BtnList.updateRole + '+=+' + $BtnList.deleteRole)"
align="center"
>
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-edit"
@click="UpdateRoleManageFun(scope.row)"
v-permission="$BtnList.updateRole"
>修改</el-button
>
<el-button
type="text"
icon="el-icon-delete"
class="red"
@click="handleDelete(scope.row)"
v-permission="$BtnList.deleteRole"
>删除</el-button
>
</template>
</el-table-column>
主要是：
v-if="$CBF($BtnList.updateRole + '+=+' + $BtnList.deleteRole)"
即可，我们使用+=+来拼接多个按钮权限。
