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

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自定义指令实现按钮级权限控制功能