Vue按钮权限的实现示例
作者：勇宝趣学前端
在编写Vue代码的时候，经常会碰到各种权限问题，如：登录权限、路由权限、按钮权限等。今天我们就好好来说一说这个按钮权限到底是怎么一回事。
一、概念
权限字面理解的意思就是权力限制，体现在日常业务开发中就是不同的角色对应不同的权力。打个比方：老师的权力是教书育人，医生的权力是救死扶伤，律师的权力是惩恶扬善。
在我们的工作中，经常有一些按钮是需要特定的角色来操作的，比如删除按钮只有管理员可以看到。
唠叨两句：按钮权限是我们开发中很重要的一环，这个思想我们一定要掌握。这才是我们开发一个大型系统所必须的技能。
二、按钮权限的方式
通过本章我讲教给小伙伴们三种实现按钮权限的方式：自定义指令、函数式渲染、v-if判断。
关于按钮权限的场景一般是这样的：比如当我们登录成功之后，后台会返回给我们当前用户对应的角色信息，可能是一个字符串，或者可能是一个字符串数组。这样我们就可以通过角色信息来判断是否渲染当前按钮。
2.1 自定义指定
首先我们先使用自定义指令来演示一下我们上边的业务功能。关于自定义指令如何书写，我就不做过多的解释，如果需要，以后会补充相关知识。
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 函数式渲染
这种方式不同于前两种，它是通过一个函数来动态渲染插槽中的内容，这个就类似于我们写一个组件。我认为这种方式要明显好于前面两种，尤其是v-if。
1、函数实现
我们创建一个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的生命周期我们发现，v-if的执行是在我们DOM挂载之后完成的，所以这样会浪费性能。因为这个按钮我们可能根本就不需要，但是我们会有一个挂载-> v-if判断-> 卸载， 这么一个过程。
三、总结
到此这篇关于Vue按钮权限的实现示例的文章就介绍到这了,更多相关Vue按钮权限内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！