在編寫Vue代碼的時候，經(jīng)常會碰到各種權(quán)限問題，如：登錄權(quán)限、路由權(quán)限、按鈕權(quán)限等。今天我們就好好來說一說這個按鈕權(quán)限到底是怎么一回事。

一、概念

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

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

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

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

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

2.1 自定義指定

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

1、編寫template部分

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

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

2、編寫自定義指定：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>

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

2.2 v-if

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

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

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

<script setup>
// 1. 這里模擬后臺返回的角色權(quán)限列表
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)容，這個就類似于我們寫一個組件。我認(rèn)為這種方式要明顯好于前面兩種，尤其是v-if。

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

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

// 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';

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

2.4 小結(jié)

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

三、總結(jié)

到此這篇關(guān)于Vue按鈕權(quán)限的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Vue按鈕權(quán)限內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論