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 文件

// has.ts 文件
// 引入仓库
import pinia from '@/store'
import useUserStore from '@/store/modules/user'
let userStore = useUserStore(pinia)
/**
 * 此方法用于全局注册自定义指令，通过在 main.ts 文件中调用此函数，把 app 实例传入，然后在此方法中进行全局注册
 * @param app 
 */
export function isDirBtn(app:any){
    app.directive('isDirBtn', {
        mounted(el:any,binging:{value:string}) {
            /**
             * el：指令绑定到的元素。这可以用于直接操作 DOM.
             * binging：一个对象，包含以下属性
             *    value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
             */
            // 判断如果当前按钮不在按钮权限的数组中，就删除当前按钮
            if(!userStore.button.includes(binging.value)){
                el.parentNode.removeChild(el)
            }
        },
    })    
}

页面.vue 文件

// index.vue 文件 
<el-button type="danger" @click="deleteSomeRole" v-isDirBtn="`base:sys:role:add`" > 删除 </el-button>

这样写的话，其他页面需要进行按钮的权限判断的话，只需在权限按钮加入该指令即可。

具体每个人的代码不一样，情况也不一样，所以主要看一个思路，实现按钮权限的一个思路就是这样的。如果有什么问题，或者你有什么其他的好的想法，可以在评论区讨论讨论