Vue按鈕權限的實現(xiàn)示例

更新時間：2024年08月01日 08:51:56 作者：勇寶趣學前端

在編寫Vue代碼的時候,經(jīng)常會碰到各種權限問題,本文主要介紹了Vue按鈕權限的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下

一、概念

權限字面理解的意思就是權力限制，體現(xiàn)在日常業(yè)務開發(fā)中就是不同的角色對應不同的權力。打個比方：老師的權力是教書育人，醫(yī)生的權力是救死扶傷，律師的權力是懲惡揚善。

在我們的工作中，經(jīng)常有一些按鈕是需要特定的角色來操作的，比如刪除按鈕只有管理員可以看到。
嘮叨兩句：按鈕權限是我們開發(fā)中很重要的一環(huán)，這個思想我們一定要掌握。這才是我們開發(fā)一個大型系統(tǒng)所必須的技能。

二、按鈕權限的方式

通過本章我講教給小伙伴們?nèi)N實現(xiàn)按鈕權限的方式：自定義指令、函數(shù)式渲染、v-if判斷。

關于按鈕權限的場景一般是這樣的：比如當我們登錄成功之后，后臺會返回給我們當前用戶對應的角色信息，可能是一個字符串，或者可能是一個字符串數(shù)組。這樣我們就可以通過角色信息來判斷是否渲染當前按鈕。

2.1 自定義指定

首先我們先使用自定義指令來演示一下我們上邊的業(yè)務功能。關于自定義指令如何書寫，我就不做過多的解釋，如果需要，以后會補充相關知識。

1、編寫template部分

<div class="container">
    <button>admin權限按鈕</button>
</div>

模板中button標簽是我們的權限按鈕

2、編寫自定義指定：el是我們掛載的元素，binging可以獲取傳入的值

<div class="container">
    <button v-permission="['admin', 'apadmin']">admin權限按鈕</button>
</div>

<script setup>
const vPermission = (el, binding) => {
    // 獲取角色數(shù)組
    const roles = binding.value;
    if (!roles.includes('admin')) {
        el.remove();
    }
}
<script>

注意：通過自定義指令來判斷當前角色是否為admin，如果不滿足條件我們就移除button標簽。

2.2 v-if

v-if和自定義指令類似，我們通過綁定一個函數(shù)通過返回值來判斷是否顯示當前的button標簽，具體代碼如下：

代碼實現(xiàn)

<div class="container">
    <button v-if="!isPermission()">admin權限按鈕</button>
</div>

<script setup>
// 1. 這里模擬后臺返回的角色權限列表
const roles = ['admin', 'apadmin'];

const isPermission = () => {
    let flag = false;
    if (!roles.includes('admin')) {
        flag = true;
    }
    return flag;
}

2.3 函數(shù)式渲染

這種方式不同于前兩種，它是通過一個函數(shù)來動態(tài)渲染插槽中的內(nèi)容，這個就類似于我們寫一個組件。我認為這種方式要明顯好于前面兩種，尤其是v-if。

1、函數(shù)實現(xiàn)

我們創(chuàng)建一個PermComp.js文件，我們暴露出一個方法。

// PermComp.js 
import { getCurrentInstance } from 'vue';

export default ({ roles }) => {
    // 1. 獲取組件實例
    const instance = getCurrentInstance();
    if (roles.includes('admin')) {
        // 2. 渲染插槽內(nèi)容
        return instance.slots && instance.slots.default();
    }
}

2、組件使用

<template>
    <div class="container">
        <PermComp :roles="roles">
            <button>admin權限按鈕</button>
        </PermComp>
    </div>
</template>
<script setup>
import PermComp from './views/test/components/PermComp.js';

// 后臺返回的角色權限列表
const roles = ['admin', 'apadmin'];
</script>

2.4 小結(jié)

這里演示了三種按鈕權限實現(xiàn)的方式，然后我有說到最后一個是我比較推薦的，為什么？
因為通過v-if的實現(xiàn)方式我們可以看到，根據(jù)Vue的生命周期我們發(fā)現(xiàn)，v-if的執(zhí)行是在我們DOM掛載之后完成的，所以這樣會浪費性能。因為這個按鈕我們可能根本就不需要，但是我們會有一個掛載-> v-if判斷-> 卸載，這么一個過程。