获取后端的接口后
将后端的数据转成数组 并报错保存
业务逻辑
function getPoints(menus) {
let Points = []
for (let menu of menus) {
if (menu.useType === 2) {
if (menu.grantName !== undefined && menu.grantName !== null) {
Points.push(menu.grantName)
}
}
if (menu.childMenuList && menu.childMenuList.length > 0) {
Points = Points.concat(getPoints(menu.childMenuList))
}
}
return Points
}
src下 新建directives 文件夹
permission.js
bash
import store from '@/store'
function checkPermission(el, binding) {
// 获取绑定的值,此处为权限
const { value } = binding
// 获取所有的功能指令
const points = store.getters.getPonits // 这里是获取上面的数组
// 当传入的指令集为数组时
if (value && value instanceof Array) {
// 匹配对应的指令
const hasPermission = points.some(point => {
return value.includes(point)
})
// 如果无法匹配,则表示当前用户无该指令,那么删除对应的功能按钮
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
// eslint-disabled-next-line
throw new Error('v-permission value is ["admin","editor"]')
}
}
export default {
// 在绑定元素的父组件被挂载后调用
mounted(el, binding) {
checkPermission(el, binding)
},
// 在包含组件的 VNode 及其子组件的 VNode 更新后调用
update(el, binding) {
checkPermission(el, binding)
}
}
index.js
bash
import print from 'vue3-print-nb'
import permission from './permission'
export default app => {
app.use(print)
app.directive('permission', permission)
}
main.js
bash
import installDirective from '@/directives'
installDirective(app)
使用
bash
<el-form-item v-permission="['ROLE_MENU_ADD']">
<el-button @click="addBtn" type="primary">新增菜单</el-button>
</el-form-item>