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

来源: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這篇英語文章的翻譯,此文出處請見於文章底部鏈接:原文出處[1] 對於客戶,我做了一些研究,如何找出SQL Server資料庫會話連接使用了哪一種TLS協議。唯一的方式就是創建一個擴展事件 ...
  • 在大數據處理中,[實時數據分析](https://www.dtstack.com/dtengine/easylake?src=szsm)是一個重要的需求。隨著數據量的不斷增長,對於實時分析的挑戰也在不斷加大,傳統的批處理方式已經不能滿足[實時數據處理](https://www.dtstack.com ...
  • Elasticsearch的查詢語句維護成本較高、在聚合計算場景下出現數據不精確等問題。Clickhouse是列式資料庫,列式型資料庫天然適合OLAP場景,類似SQL語法降低開發和學習成本,採用快速壓縮演算法節省存儲成本,採用向量執行引擎技術大幅縮減計算耗時。所以做此對比,進行Elasticsearc... ...
  • 鑒於《網路新詞網路熱詞大全ACCESS資料庫》幾百條的記錄數太少,於是找了找網路上的一些流行熱詞網站,挑了個數據量大的採集了下來,經過整理(去除重覆、去除詞長超過10字)共得到1萬4千多條記錄。 熱詞:做完核酸可以領豆油解釋:疫情期間民眾耳朵不好使現狀。其實是“做完核酸不要逗留”。源自海南某地一排隊 ...
  • 英語詞典、背單詞類的數據已經發了很多很多了,打算今天這一個將是最後一個了,後續沒有顛覆性的好的話就不再發這類數據了,今天這一份的背單詞資料庫好處是有58個分類,之前發過有27個分類的《1萬6千多最好的背單詞SQLITE資料庫》。 單詞表:36238條記錄,可以看一下word_root_id欄位的作用 ...
  • 無人直播插件 直播替換安裝使用教程 一、適用機型及系統1、機型:所有iphone機型,可越獄即可2、系統:支持13系統及以上所有可越獄系統二、安裝手機端1、越獄(1)Windows越獄方法:電腦端安裝愛思助手,點擊工具 》一鍵越獄 》 選擇uncover 》開始越獄,如提示需要登錄,點擊商城,註冊並 ...
  • key是widget、element和semanticsNode的唯一標識,同一個parent下的所有element的key不能重覆,但是在特定條件下可以在不同parent下使用相同的key,比如page1和page2都可以使用ValueKey ...
  • >WebGL近幾年越來越被人們所關註,但是二三維開發難度也比普通web要高出許多,不管我們是在在開發或者是學習過程中,往往需要耗費大量的時間去查閱資料,和研究官方案例, >而大多二三維的包(openlayersjs,cesiumjs、threejs)都是外國的,如果英語水平好還行,否則讀起來正是連蒙 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...