優雅的使用VUE---[高精度全局權限處理]

權限的控制由前端處理的場景很多，例如根據後臺返回內容，判斷該人是否對此功能有權限，進而去修改元素v-if / v-show，這種情況下，當這個功能在多處地方出現，就會導致我們做很多很多不必要的重複代碼，如果判斷條件繁瑣的情況，更加冗餘，代碼量也會增加很多。因此我們可以造一個小車輪，掛在全局上對權限進行處理

實戰 - 處理某按鈕顯示權限問題
這種場景出現機率極高，尤其是處理含有多種角色的項目，如果這一類型的權限判斷有多次處理，每一次出現都經歷判斷的話，代碼將會異常難看且冗餘，因此我們可以通過全局權限判斷來處理

/*
    在項目裏新建一個common文件夾用於存放全局 .js 文件
    這種全局文件夾做法相當普遍，一般項目裏都應該有這樣一個文件夾來管理全局的東西
*/

// common/jurisdiction.js  用於存放與權限相關的全局函數/變量

export function checkJurisdiction(key) {
    // 權限數組
    let jurisdictionList = ['1', '2', '3', '5']
    let index = jurisdictionList.indexOf(key)
    console.log('index:',index)
    if (index > -1) {
        // 有權限
        return true
    } else {
        // 無權限
        return false
    }
}

// 將全局權限Js掛載到全局中
// main.js

import { checkJurisdiction } from './common/jurisdiction'

// 優雅操作 - VUE自定義指令
Vue.directive('permission',{
  inserted(el, binding){
    // inserted → 元素插入的時候
    
    let permission = binding.value // 獲取到 v-permission的值

    if(permission){
      let hasPermission = checkJurisdiction(permission)
      if(!hasPermission){
        // 沒有權限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }else{
      throw new Error('需要傳key')
    }
  }
})

// 使用方式
// 無需再通過value去判斷，直接通過v-permission的值進行判斷即可
<template>
  <div>
    <h1>I am Home</h1>
    <!-- 按鈕根據value -->
    <div v-permission="'10'">
      <button>權限1</button>
    </div>
    <div v-permission="'5'">
      <button>權限2</button>
    </div>
  </div>
</template>