Vue.directive指令實作按鈕級别權限控制

Vue

.directive文檔：

https://cn.vuejs.org/v2/guide/custom-directive.html

使用

定義一個按鈕級别指令

// 擷取使用者角色, 可以從cookie中擷取
function getRole() {
  return 'admin'
}

// 校驗使用者權限，傳入一個數組
function hasPermission(role) {
  return role.includes(getRole())
}

// 注冊一個全局自定義指令 `v-role`
Vue.directive('role', {
  inserted: (el, binding, vnode) => {
    // 如果沒有權限就移除此節點
    if (!hasPermission(binding.value)) {
      el.parentNode.removeChild(el);
    }
  }
})
      

使用示例

<template>
  <div>
    <div v-role="['user', 'admin', 'superAdmin']">user</div>
    <div v-role="['admin', 'superAdmin']">admin</div>
    <div v-role="['superAdmin']">superAdmin</div>
  </div>
</template>
      

問題：el.parentNode擷取不到

将bind替換為inserted

參考

Vue 指令實作按鈕級别權限管理功能