vue自定义指令实现不同角色展示读写权限

雨点打透心脏的1/2处 2023-01-19 03:12 13阅读 0赞

import Vue from "vue"
    // 在开发中,buttonList的相关数据都是后端给的
    //这个页面是自定义
    function list() { 
      let queryUserMenu = JSON.parse(localStorage.getItem("userInfo_Menu"))  //获取用户所有菜单
      //
      let dizhi = window.location.href
      let queryPathUrl = dizhi.split("/")
      let onurl = '/' + queryPathUrl[queryPathUrl.length - 2] + '/' + queryPathUrl[queryPathUrl.length - 1] //获取浏览器当前的路由
      //
      let buttonList = []
      queryUserMenu.forEach((item) => { 
        item.children.forEach((citem) => { 
          if (citem.menuUrl == onurl && citem.readorwrite == 2) { 
            buttonList = [
              {  name: "编辑", permission: true },// permission控制展示隐藏
              {  name: "删除", permission: true },
              {  name: "新增", permission: true }
            ]
    
          }
        })
      })
      return buttonList
    }
    
    //如果后端返回的可以存在混村，取出来sessionStorage.getItem
    /** * 判断按钮是否有权显示 * @param name * @returns {boolean} */
    function isButtomShow(buttonList, name) { 
      // 根据name匹配唯一
      return buttonList.some(v => v.name && v.name === name && v.permission)
    }
    
    // 按钮存在且为true,则显示
    
    Vue.directive('button-check', { 
      inserted(el, binding, vnode) { 
        const name = binding.value // 接受指令传入的值
        if (!isButtomShow(list(), name)) { 
          el.parentNode.removeChild(el) // 移除节点
        }
      }
    })

使用：  
在main.js中引入，

import '../src/directive/button-check.js'

再在按钮中使用：

<a @click="handleDel(record)" v-button-check="delname">删除</a>    //delname：'删除'

可参考其他方法[Vue自定义指令实现按钮级权限控制功能][Vue]

[Vue]: https://www.cnblogs.com/leeke98/p/9458540.html