通过自定义指令对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'}"
导入