面試官問我按鈕級別許可權怎麼控制，我說v-if，面試官說再見

街角小林發表於2023-03-13
面試

最近的面試中有一個面試官問我按鈕級別的許可權怎麼控制，我說直接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方法的重新執行。

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

相關文章