mzjh 项目鉴权 - 技术栈

获取后端的接口后

将后端的数据转成数组并报错保存

业务逻辑

复制代码

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>