RBAC 权限设计-按钮级别权限-自定义指令(directive)

RBAC 权限设计-按钮级别权限-自定义指令(directive)

权限不同所能做的操作也会不同，因此权限可以控制在按钮级别，通过 v-if 可以来判断按钮的存在与否，在这里给大家推荐一种高端大气上档次的写法 自定义指令

在 main.js 里面定义全局自定义指令

// 自定义指令-控制按钮级别权限
Vue.directive('hide', {
  inserted(el, binding) {
    // 判断是否有某个按钮权限，没有的话就删除该按钮
    if (!store.state.user.userInfo.roles.points.includes(binding.value)) {
      // 原生方法 找父级 parentNode，删除子节点 removeChild
      el.parentNode.removeChild(el)
    }
  }
})

根据权限来添加自定义指令即可