权限按钮

[Application->sessionStorage->state]

console.log(binding)

outboundAudit.vue页面

main.js全局挂载

• 第一步

Vue.directive('showBtn', { //自定义按钮权限指令
  //页面元素绑定:页面路由uri、按钮路由btnUri
  inserted: function (el, binding, vnode) {  //inserted被绑定元素插入父节点时调用，父节点存在即可调用
    if(!Vue.prototype.$showBtn(binding)){ 
      console.log(el)
      el.parentNode.removeChild(el);
    }
  }
})

• 第二步

Vue.prototype.$showBtn = function (binding) { //判断按钮显隐
  // console.log(binding)
  let result = false
  JSON.parse(sessionStorage.getItem("state")).routes.forEach((item) => {
    if (item.uri == binding.value.uri && item.son) {
      result = Vue.prototype.son(item,binding)
    }
  })
  return result
}

• 第三步

Vue.prototype.son = function (item,binding) { //递归son
  let isShow = false;
  if (item.son) {
    item.son.forEach((sonItem) => {
      let btnPermission = sonItem.isBtn
      let btnUri = sonItem.uri
      if (btnPermission == undefined || btnPermission == false || btnUri != binding.value.btnUri) {
        return false;
      }
      if (btnPermission && btnUri == binding.value.btnUri) { //binding.value是指令的绑定值
        isShow = true;
      }
      Vue.prototype.son(sonItem)
    })
  }
  return isShow
}