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

一、概念

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

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

二、按鈕權限的方式

通過本章我講教給小伙伴們三種實現按鈕權限的方式：自定義指令、函數式渲染、v-if判斷。

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

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) => {
    // 獲取角色數組
    const roles = binding.value;
    if (!roles.includes('admin')) {
        el.remove();
    }
}
<script>

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

2.2 v-if

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

代碼實現

<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 函數式渲染

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

1、函數實現

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

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

export default ({ roles }) => {
    // 1. 獲取組件實例
    const instance = getCurrentInstance();
    if (roles.includes('admin')) {
        // 2. 渲染插槽內容
        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 小結

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

三、總結

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