記錄--按鈕級別許可權怎麼控制

来源:https://www.cnblogs.com/smileZAZ/archive/2023/05/24/17429184.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 最近的面試中有一個面試官問我按鈕級別的許可權怎麼控制，我說直接v-if啊，他說不夠好，我說我們項目中按鈕級別的許可權控制情況不多，所以v-if就夠了，他說不夠通用，最後他對我的評價是做過很多東西，但是都不夠深入，好吧，那今天我們就來深入深入。 ...


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

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

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • How to find the TLS used for the SQL Server connection
    本文是How to find the TLS used for the SQL Server connection這篇英語文章的翻譯，此文出處請見於文章底部鏈接：原文出處[1] 對於客戶，我做了一些研究，如何找出SQL Server資料庫會話連接使用了哪一種TLS協議。唯一的方式就是創建一個擴展事件 ...
  • Apache Hudi 在袋鼠雲數據湖平臺的設計與實踐
    在大數據處理中，[實時數據分析](https://www.dtstack.com/dtengine/easylake?src=szsm)是一個重要的需求。隨著數據量的不斷增長，對於實時分析的挑戰也在不斷加大，傳統的批處理方式已經不能滿足[實時數據處理](https://www.dtstack.com ...
  • Elasticsearch與Clickhouse數據存儲對比
    Elasticsearch的查詢語句維護成本較高、在聚合計算場景下出現數據不精確等問題。Clickhouse是列式資料庫，列式型資料庫天然適合OLAP場景，類似SQL語法降低開發和學習成本，採用快速壓縮演算法節省存儲成本，採用向量執行引擎技術大幅縮減計算耗時。所以做此對比，進行Elasticsearc... ...
  • 【資料庫】時區及JDBC的時區設置
    鑒於《網路新詞網路熱詞大全ACCESS資料庫》幾百條的記錄數太少，於是找了找網路上的一些流行熱詞網站，挑了個數據量大的採集了下來，經過整理（去除重覆、去除詞長超過10字）共得到1萬4千多條記錄。 熱詞：做完核酸可以領豆油解釋：疫情期間民眾耳朵不好使現狀。其實是“做完核酸不要逗留”。源自海南某地一排隊 ...
  • 58個分類背單詞英語詞典ACCESS\EXCEL資料庫
    英語詞典、背單詞類的數據已經發了很多很多了，打算今天這一個將是最後一個了，後續沒有顛覆性的好的話就不再發這類數據了，今天這一份的背單詞資料庫好處是有58個分類，之前發過有27個分類的《1萬6千多最好的背單詞SQLITE資料庫》。 單詞表：36238條記錄，可以看一下word_root_id欄位的作用 ...
  • 無人直播插件 直播替換安裝使用教程
    無人直播插件 直播替換安裝使用教程 一、適用機型及系統1、機型：所有iphone機型，可越獄即可2、系統：支持13系統及以上所有可越獄系統二、安裝手機端1、越獄（1）Windows越獄方法：電腦端安裝愛思助手，點擊工具 》一鍵越獄 》 選擇uncover 》開始越獄，如提示需要登錄，點擊商城，註冊並 ...
  • Flutter三棵樹系列之詳解各種Key
    key是widget、element和semanticsNode的唯一標識，同一個parent下的所有element的key不能重覆，但是在特定條件下可以在不同parent下使用相同的key，比如page1和page2都可以使用ValueKey ...
  • Cesium開發案例整理
    >WebGL近幾年越來越被人們所關註，但是二三維開發難度也比普通web要高出許多，不管我們是在在開發或者是學習過程中，往往需要耗費大量的時間去查閱資料，和研究官方案例， >而大多二三維的包(openlayersjs,cesiumjs、threejs)都是外國的，如果英語水平好還行,否則讀起來正是連蒙 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類