面試官問我按鈕級別權限怎麼控制,我説v-if,面試官説再見

語言: CN / TW / HK

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

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

獲取權限碼

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

```js 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);
    }
}

}) ```

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

函數方式

使用示例如下:

```html

```

本質上就是通過v-if,只不過是通過一個統一的權限判斷方法hasPermission

```js 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組件,使用示例如下:

```html

```

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

```js

```

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

指令方式

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

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

實現如下:

```js 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鈎子:

```js 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鈎子裏通過這個方法將用户權限數據和按鈕的更新方法關聯起來,這樣當用户權限數據改變了,可以自動觸發按鈕的重新渲染:

```js 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方法的重新運行。

好了,深入完了,看着似乎也挺簡單的,我不確定這些是不是面試官想要的,或者還有其他更高級更優雅的實現呢,知道的朋友能否指點一二,在下感激不盡。