在编写Vue代码的时候，经常会碰到各种权限问题，如：登录权限、路由权限、按钮权限等。今天我们就好好来说一说这个按钮权限到底是怎么一回事。

一、概念

权限字面理解的意思就是权力限制，体现在日常业务开发中就是不同的角色对应不同的权力。打个比方：老师的权力是教书育人，医生的权力是救死扶伤，律师的权力是惩恶扬善。

在我们的工作中，经常有一些按钮是需要特定的角色来操作的，比如删除按钮只有管理员可以看到。

唠叨两句：按钮权限是我们开发中很重要的一环，这个思想我们一定要掌握。这才是我们开发一个大型系统所必须的技能。

二、按钮权限的方式

通过本章我讲教给小伙伴们三种实现按钮权限的方式：自定义指令、函数式渲染、v-if判断。

关于按钮权限的场景一般是这样的 ：比如当我们登录成功之后，后台会返回给我们当前用户对应的角色信息，可能是一个字符串，或者可能是一个字符串数组。这样我们就可以通过角色信息来判断是否渲染当前按钮。

2.1 自定义指定

首先我们先使用自定义指令来演示一下我们上边的业务功能。关于自定义指令如何书写，我就不做过多的解释，如果需要，以后会补充相关知识。

编写template部分
html 复制代码
```
<div class="container">
    <button>admin权限按钮</button>
</div>
```
模板中button标签是我们的权限按钮

编写自定义指定：el是我们挂载的元素，binging可以获取传入的值

html 复制代码

<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标签，具体代码如下：

代码实现

html 复制代码

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

这种方式不同于前两种，它是通过一个函数来动态渲染插槽中的内容，这个就类似于我们写一个组件。我认为这种方式要明显好于前面两种，尤其是v-if。

函数实现

我们创建一个PermComp.js文件，我们暴露出一个方法。

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();
    }
}

组件使用

html 复制代码

<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的生命周期我们发现，v-if的执行是在我们DOM挂载之后完成的，所以这样会浪费性能。因为这个按钮我们可能根本就不需要，但是我们会有一个挂载-> v-if判断-> 卸载，这么一个过程。

三、总结

以上是我对于按钮权限的理解，可能还有更高级的写法等着我去探索，另外说几句题外话，最近勇宝打算看一些和个人文化素养相关的书籍，比如为人处事呀，职场等等，有小伙伴推荐一下吗？欢迎评论区留言！！！

一文搞懂Vue按钮权限

一、概念

二、按钮权限的方式

2.1 自定义指定

2.2 v-if

2.3 函数式渲染

2.4 小结

三、总结