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>
相关推荐
悟能不能悟1 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶1 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
LFly_ice2 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip2 小时前
js上下文
前端·javascript
中草药z2 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
世伟爱吗喽3 小时前
threejs入门学习日记
前端·javascript·three.js
F2E_Zhangmo3 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
小浣熊喜欢揍臭臭4 小时前
react+umi项目如何添加electron的功能
javascript·electron·react
乖女子@@@4 小时前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo4 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css