快捷導(dǎo)航

Vue按鈕權(quán)限的實(shí)現(xiàn)示例

更新時(shí)間：2024年08月01日 08:51:56 作者：勇寶趣學(xué)前端

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

一、概念

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

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

二、按鈕權(quán)限的方式

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

關(guān)于按鈕權(quán)限的場(chǎng)景一般是這樣的：比如當(dāng)我們登錄成功之后，后臺(tái)會(huì)返回給我們當(dāng)前用戶(hù)對(duì)應(yīng)的角色信息，可能是一個(gè)字符串，或者可能是一個(gè)字符串?dāng)?shù)組。這樣我們就可以通過(guò)角色信息來(lái)判斷是否渲染當(dāng)前按鈕。

2.1 自定義指定

首先我們先使用自定義指令來(lái)演示一下我們上邊的業(yè)務(wù)功能。關(guān)于自定義指令如何書(shū)寫(xiě)，我就不做過(guò)多的解釋?zhuān)绻枰?，以后?huì)補(bǔ)充相關(guān)知識(shí)。

1、編寫(xiě)template部分

<div class="container">
    <button>admin權(quán)限按鈕</button>
</div>

模板中button標(biāo)簽是我們的權(quán)限按鈕

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

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

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

注意：通過(guò)自定義指令來(lái)判斷當(dāng)前角色是否為admin，如果不滿(mǎn)足條件我們就移除button標(biāo)簽。

2.2 v-if

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

代碼實(shí)現(xiàn)

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

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

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

2.3 函數(shù)式渲染

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

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

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

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

export default ({ roles }) => {
    // 1. 獲取組件實(shí)例
    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權(quán)限按鈕</button>
        </PermComp>
    </div>
</template>
<script setup>
import PermComp from './views/test/components/PermComp.js';

// 后臺(tái)返回的角色權(quán)限列表
const roles = ['admin', 'apadmin'];
</script>

2.4 小結(jié)

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