按钮权限在项目中是一种非常常见的需求，通常情况下，我们通过自定义指令的方式完成。
整个流程在我看来主要是以下几个步骤：
- 获取权限
- 将权限存入本地
- 创建权限自定义指令
- 全局挂载自定义指令
- 在dom上使用
一：获取权限
通过接口获取到定义好的权限字段，通常都是菜单权限加按钮权限，将按钮权限的字段筛选出来
二：将权限存在本地
将按钮权限筛选出来之后，存到本地
// 1，先判断本地是否存在，存在先进行删除，防止不同用户登录时权限耦合
if(localStorage.getItem(LOCAL_PERMISSION_KEY)){
localStorage.removeItem(LOCAL_PERMISSION_KEY)
}
// 2，对获取的权限进行筛选，具体操作根据获取的数据来
const buttonPrivilege = arr.filter(item =>item.resourceType=="BUTTON").map(item=>item.code)
// 3，将筛选出的权限转换为json格式，存到本地
localStorage.setItem(LOCAL_PERMISSION_KEY, JSON.stringify(buttonPrivilege))
三：创建权限自定义指令
创建自定义指令的方法都是一样的，唯一的差别可能是每个人的代码风格不同，所以书写的方式也不一样，我这里也是自己的书写方式，可以根据我的方法自行修改
通过app.directive('你的指令名称', 指令定义对象)可以创建一个全局自定义指令，我这里是将指令定义对象提取出来了
/**
* @plugins/index.ts
* 我创建了一个plugins文件夹，在文件夹中定义了index.ts文件，并将需要挂载的函数暴露出去，以后有需要全局挂载的文件都可以放到这个文件夹中，并在这个文件里暴露出去
*/
export { setupDirectives } from './directives';
/**
* @plugins/directive.ts
* 我创建了一个plugins文件夹，在文件夹中定义了directive.ts文件并在index文件中暴露函数setupDirectives，以后要是有其他全局文件，都可以放到这个文件夹中一起管理
*/
import { App } from 'vue';
import { permission } from '@/directives/permission';
import { focus } from '@/directives/focus';
/**
* 注册全局自定义指令
* @param app
* 我这里的指令定义对象permission是从另一个文件夹中导入的，如果有其他自定义指令，都可以直接在setupDirectives函数中书写
*/
export function setupDirectives(app: App) {
// 权限控制指令
app.directive('permission', permission);
app.directive('focus', focus);
}
app.directive('你的指令名称', 指令定义对象)，指令定义对象里面是一个类似组件生命周期的钩子函数，如果想了解详情可以去vue官网了解，我这里用的是mounted()这个函数，它在所有节点挂载完成后调用，这个函数mounted(el, binding, vnode, prevVnode)有四个参数，具体参数值可去vue官网查看
/**
* @directives/permission.ts
* 我创建了一个directives文件夹，用来存放所有的全局自定义指令
*/
import { ObjectDirective } from 'vue';
import { usePermission } from '@/hooks/usePermission';
/**
* @el：获取绑定的dom
* @binding.value：通过指令绑定之后传过来的参数
* 具体的权限判断代码我放到hasPermission()函数中
*/
export const permission: ObjectDirective = {
mounted(el: HTMLButtonElement, binding) {
if (binding.value == undefined) return;
const code = binding.value;
const { hasPermission } = usePermission();
// 将获取到的值传到权限判断函数中，如果函数返回false，删除dom
if (!hasPermission(code)) {
el.remove();
}
},
};
/**
* @hooks/usePermission.ts
* @getStoreData：用来取出之前存好的按钮权限并转换格式
* @usePermission：用来判断是否拥有权限
*/
function getStoreData(dataKey) {
const permissionsStr = localStorage.getItem(dataKey)
const permissions=JSON.parse(permissionsStr)
// console.log(permissions)
return {
permissions
}
}
export function usePermission() {
const {permissions}= getStoreData(LOCAL_PERMISSION_KEY);
/**
* 判断是否存在权限
* 可用于 v-if 显示逻辑
* */
function hasPermission(code): boolean {
// 如果没有code，直接返回true
if (!code) return true;
if(permissions&&permissions.length>0){
// 判断传过来的值是否在获取的权限中，在就返回true，否则返回false
return permissions.indexOf(code) >-1? true : false;
}
return false;
}
return { hasPermission };
}
四：全局挂载自定义指令
/**
* 导入plugins文件夹中的index文件，并提取setupDirectives函数，将创建好的app实列通过参数传过去
* */
import { setupDirectives } from './plugins'
const app = createApp(App)
//注册指令
setupDirectives(app)
五：在dom上使用
<n-checkbox v-permission="'定义好的权限字段'" />
以上就是我做按钮权限的全部流程，如果有什么问题，欢迎大家一起讨论交流
