這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

最近的面試中有一個面試官問我按鈕級別的許可權怎麼控制，我說直接v-if啊，他說不夠好，我說我們項目中按鈕級別的許可權控制情況不多，所以v-if就夠了，他說不夠通用，最後他對我的評價是做過很多東西，但是都不夠深入，好吧，那今天我們就來深入深入。

因為我自己沒有相關實踐，所以接下來就從這個有16.2k星星的後臺管理系統項目Vue vben admin中看看它是如何做的。

獲取許可權碼

要做許可權控制，肯定需要一個code，無論是許可權碼還是角色碼都可以，一般後端會一次性返回，然後全局存儲起來就可以了，Vue vben admin是在登錄成功以後獲取並保存到全局的store中：

import { defineStore } from 'pinia';
export const usePermissionStore = defineStore({
    state: () => ({
        // 許可權代碼列表
        permCodeList: [],
    }),
    getters: {
        // 獲取
        getPermCodeList(){
      		return this.permCodeList;
    	},	
    },
    actions: {
        // 存儲
        setPermCodeList(codeList) {
            this.permCodeList = codeList;
        },

        // 請求許可權碼
        async changePermissionCode() {
            const codeList = await getPermCode();
            this.setPermCodeList(codeList);
        }
    }
})

接下來它提供了三種按鈕級別的許可權控制方式，一一來看。

函數方式

使用示例如下：

<template>
  <a-button v-if="hasPermission(['20000', '2000010'])" color="error" class="mx-4">
    擁有[20000,2000010]code可見
  </a-button>
</template>

<script lang="ts">
  import { usePermission } from '/@/hooks/web/usePermission';

  export default defineComponent({
    setup() {
      const { hasPermission } = usePermission();
      return { hasPermission };
    },
  });
</script>

本質上就是通過v-if，只不過是通過一個統一的許可權判斷方法hasPermission：

export function usePermission() {
    function hasPermission(value, def = true) {
        // 預設視為有許可權
        if (!value) {
            return def;
        }

        const allCodeList = permissionStore.getPermCodeList;
        if (!isArray(value)) {
            return allCodeList.includes(value);
        }
        // intersection是lodash提供的一個方法，用於返回一個所有給定數組都存在的元素組成的數組
        return (intersection(value, allCodeList)).length > 0;

        return true;
    }
}

很簡單，從全局store中獲取當前用戶的許可權碼列表，然後判斷其中是否存在當前按鈕需要的許可權碼，如果有多個許可權碼，只要滿足其中一個就可以。

組件方式

除了通過函數方式使用，也可以使用組件方式，Vue vben admin提供了一個Authority組件，使用示例如下：

<template>
  <div>
    <Authority :value="RoleEnum.ADMIN">
      <a-button type="primary" block> 只有admin角色可見 </a-button>
    </Authority>
  </div>
</template>
<script>
  import { Authority } from '/@/components/Authority';
  import { defineComponent } from 'vue';
  export default defineComponent({
    components: { Authority },
  });
</script>

使用Authority包裹需要許可權控制的按鈕即可，該按鈕需要的許可權碼通過value屬性傳入，接下來看看Authority組件的實現。

<script lang="ts">
  import { defineComponent } from 'vue';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { getSlot } from '/@/utils/helper/tsxHelper';

  export default defineComponent({
    name: 'Authority',
    props: {
      value: {
        type: [Number, Array, String],
        default: '',
      },
    },
    setup(props, { slots }) {
      const { hasPermission } = usePermission();

      function renderAuth() {
        const { value } = props;
        if (!value) {
          return getSlot(slots);
        }
        return hasPermission(value) ? getSlot(slots) : null;
      }

      return () => {
        return renderAuth();
      };
    },
  });
</script>

同樣還是使用hasPermission方法，如果當前用戶存在按鈕需要的許可權碼時就原封不動渲染Authority包裹的內容，否則就啥也不渲染。

指令方式

最後一種就是指令方式，使用示例如下：

<a-button v-auth="'1000'" type="primary" class="mx-4"> 擁有code ['1000']許可權可見 </a-button>

實現如下：

import { usePermission } from '/@/hooks/web/usePermission';

function isAuth(el, binding) {
  const { hasPermission } = usePermission();

  const value = binding.value;
  if (!value) return;
  if (!hasPermission(value)) {
    el.parentNode?.removeChild(el);
  }
}

const mounted = (el, binding) => {
  isAuth(el, binding);
};

const authDirective = {
  // 在綁定元素的父組件
  // 及他自己的所有子節點都掛載完成後調用
  mounted,
};

// 註冊全局指令
export function setupPermissionDirective(app) {
  app.directive('auth', authDirective);
}

只定義了一個mounted鉤子，也就是在綁定元素掛載後調用，依舊是使用hasPermission方法，判斷當前用戶是否存在通過指令插入的按鈕需要的許可權碼，如果不存在，直接移除綁定的元素。

很明顯，Vue vben admin的實現有兩個問題，一是不能動態更改按鈕的許可權，二是動態更改當前用戶的許可權也不會生效。

解決第一個問題很簡單，因為上述只有刪除元素的邏輯，沒有加回來的邏輯，那麼增加一個updated鉤子：

app.directive("auth", {
    mounted: (el, binding) => {
        const value = binding.value
        if (!value) return
        if (!hasPermission(value)) {
            // 掛載的時候沒有許可權把元素刪除
            removeEl(el)
        }
    },
    updated(el, binding) {
        // 按鈕許可權碼沒有變化，不做處理
        if (binding.value === binding.oldValue) return
        // 判斷用戶本次和上次許可權狀態是否一樣，一樣也不用做處理
        let oldHasPermission = hasPermission(binding.oldValue)
        let newHasPermission = hasPermission(binding.value)
        if (oldHasPermission === newHasPermission) return
        // 如果變成有許可權，那麼把元素添加回來
        if (newHasPermission) {
            addEl(el)
        } else {
        // 如果變成沒有許可權，則把元素刪除
            removeEl(el)
        }
    },
})

const hasPermission = (value) => {
    return [1, 2, 3].includes(value)
}

const removeEl = (el) => {
    // 在綁定元素上存儲父級元素
    el._parentNode = el.parentNode
    // 在綁定元素上存儲一個註釋節點
    el._placeholderNode = document.createComment("auth")
    // 使用註釋節點來占位
    el.parentNode?.replaceChild(el._placeholderNode, el)
}

const addEl = (el) => {
    // 替換掉給自己占位的註釋節點
    el._parentNode?.replaceChild(el, el._placeholderNode)
}

主要就是要把父節點保存起來，不然想再添加回去的時候獲取不到原來的父節點，另外刪除的時候創建一個註釋節點給自己占位，這樣下次想要回去能知道自己原來在哪。

第二個問題的原因是修改了用戶許可權數據，但是不會觸發按鈕的重新渲染，那麼我們就需要想辦法能讓它觸發，這個可以使用watchEffect方法，我們可以在updated鉤子里通過這個方法將用戶許可權數據和按鈕的更新方法關聯起來，這樣當用戶許可權數據改變了，可以自動觸發按鈕的重新渲染：

import { createApp, reactive, watchEffect } from "vue"
const codeList = reactive([1, 2, 3])

const hasPermission = (value) => {
    return codeList.includes(value)
}

app.directive("auth", {
    updated(el, binding) {
        let update = () => {
            let valueNotChange = binding.value === binding.oldValue
            let oldHasPermission = hasPermission(binding.oldValue)
            let newHasPermission = hasPermission(binding.value)
            let permissionNotChange = oldHasPermission === newHasPermission
            if (valueNotChange && permissionNotChange) return
            if (newHasPermission) {
                addEl(el)
            } else {
                removeEl(el)
            }
        };
        if (el._watchEffect) {
            update()
        } else {
            el._watchEffect = watchEffect(() => {
                update()
            })
        }
    },
})

將updated鉤子里更新的邏輯提取成一個update方法，然後第一次更新在watchEffect中執行，這樣用戶許可權的響應式數據就可以和update方法關聯起來，後續用戶許可權數據改變了，可以自動觸發update方法的重新運行。

本文轉載於:

https://juejin.cn/post/7209648356530896953

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。