一文搞懂Vue按钮权限

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

文章目录

一、概念
二、按钮权限的方式
- 2.1 自定义指定
- 2.2 v-if
- 2.3 函数式渲染
- 2.4 小结
三、总结

一、概念

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

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

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

二、按钮权限的方式

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

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

2.1 自定义指定

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

编写template部分

<div class="container"><button>admin权限按钮</button>
</div>

模板中button标签是我们的权限按钮

编写自定义指定：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 函数式渲染

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

函数实现

我们创建一个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();}
}

组件使用

<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判断-> 卸载，这么一个过程。