首页 > 编程学习 > 通过自定义指令对button进行权限的校验

通过自定义指令对button进行权限的校验

发布时间:2022/8/28 9:40:20

通过自定义指令对button进行权限的校验
场景:左侧菜单栏通过调接口获取,每一个菜单下的还有该菜单下的button的权限操作,在mentType为2时,该children就是button权限列表
1.先获取所有有权限的buttom
import store from "@/store"
export function setPermission (menuList) {
let btnList = []
fn = (data) => {
data.forEach(item => {
if (mentType === 2) {
btnList.push(...item.children)
}
if (item.children && item.children.length) {
fn(item.children)
}
})
}
fn(menuList)
//btnList就是含有权限的butoon,然后存到仓库中
store.$commit("user/setBtnList",
btnList.map(item => item.permission) //permission 为有权限button的名称
)
}

2.校验是否有权限
export function hasBtnPermission (val) {
let btnList = store.state.user.btnList
return btnList.includes(val)
}

3. 自定义指令v-permission
注意:自定义指令要在main.js引进 import "@/module/directive/permission.js"
import hasBtnPermission from "index.js"
import Vue from "vue"
Vue.directive("permission", {
inserted: function (el, binding) {
let { permission, active} = binding.value
let hasPermission = hasBtnPermission (permission)
if (actice === 'delete' && !hasPermission) {
//删除该节点
el.parentNode && el.parentNode.removeChild(el)
} else if (!hasPermission) {
//添加属性,给button disabled
el.disabled = true
}
}
})

4.页面的使用
<el-button
@click ="handleClick"
v-permission="{ permission: 'import', actice: 'delete'}"

导入

Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号