vue 自定义指令 实现 按钮权限

1.登录成功后，获取后台返回所有的按钮权限id,存到sessionStorage中

2.在main.js中自定义指令

const has = Vue.directive('has', {
  inserted: function (el, binding) {
    // 获取按钮权限
    if (!Vue.prototype.$_has(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})
Vue.prototype.$_has = function (value) {
  let isExit = false
  let buttonpermsStr = sessionStorage.getItem('buttonpermissions')
  if (buttonpermsStr === undefined || buttonpermsStr === null) {
    return false
  }
  for (let i = 0; i < buttonpermsStr.length; i++) {
    if (value === buttonpermsStr[i]) {
      isExit = true
      break
    }
  }
  return isExit
}
export {has}

3.在按钮上直接写上v-has="后台返回的按钮id"

<el-button class="btns" @click="delItem" v-has="'666'">删除</el-button>