vue 自定義操作權限的指令

背景：在一些后台管理系統，我們可能需要根據用戶角色進行一些操作權限的判斷，很多時候我們都是粗暴地給一個元素添加 v-if / v-show 來進行顯示隱藏，但如果判斷條件繁瑣且多個地方需要判斷，這種方式的代碼不僅不優雅而且冗余。針對這種情況，我們可以通過全局自定義指令來處理。

需求：自定義一個權限指令，對需要權限判斷的 Dom 進行顯示隱藏。

function checkArray(key) {
  let arr = ['1', '2', '3', '4']
  let index = arr.indexOf(key)
  if (index > -1) {
    return true // 有權限
  } else {
    return false // 無權限
  }
}

const permission = {
  inserted: function (el, binding) {
    let permission = binding.value // 獲取到 v-permission的值
    if (permission) {
      let hasPermission = checkArray(permission)
      if (!hasPermission) {
        // 沒有權限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  },
}

export default permission

　　

使用：給 v-permission 賦值判斷即可

<div class="btns">
  <!-- 顯示 -->
  <button v-permission="'1'">權限按鈕1</button>
  <!-- 不顯示 -->
  <button v-permission="'10'">權限按鈕2</button>
</div>