Vue 通过自定义指令实现前端按钮权限功能

一、什么是按钮权限功能

在许多后台管理的项目中，不同类型的用户（如普通用户、管理员等）可能具有不同的权限。通过前端按钮权限功能，你可以根据用户的角色或权限级别动态显示或隐藏某些按钮或操作，从而确保用户只能访问其具有权限的功能，从而增强项目的安全性和用户体验。

二、如何实现

目前我知道的两种解决方案：

1、拿到仓库用来存放按钮权限的数组，配合v-if去实现（太繁琐）

2、使用自定义指令实现（推荐）      

第一种方法是通过仓库拿到按钮的数据，在页面里配合 v-if 去实现按钮的显示与隐藏，这里就会出现一个问题，如果多个页面都需要进行按钮的权限判断，那么每个页面都需要去获取用户权限的数组与当前按钮进行比较判断，所以很繁琐。不是说这种方法不能用，而是我不太推荐这样用。所以下面重点来讲第二种方法（自定义指令）

（一）思路：

登录完以后通过token获取用户对应的button(按钮权限)，通过自定义指令，判断当前按钮的权限是否在用户对应的button数组里，若不在即删除该按钮DOM。

（二）代码实现：

main.ts 文件

// main.ts 文件
// 引入自定义指令文件
import {isDirBtn} from '@/directive/has'
const app = createApp(App)
isDirBtn(app)

has.ts 文件