基于 Vue3 + TS + Ant Design Vue 实现精细化菜单按钮权限授权组件

在前端开发中，RBAC（基于角色的访问控制）是企业级应用的核心需求。本文将分享如何使用Vue3 + TypeScript + Vite + Ant Design Vue实现一个功能完善的菜单与按钮级别的权限授权组件，支持树形菜单选择、动态按钮联动、状态持久化等高级特性。🎯 核心功能亮点✅双栏布局：左侧树形菜单选择，右侧动态按钮列表✅细粒度控制：支持菜单级和按钮级双重权限控制✅状态保持：切换菜单时自动保存/恢复按钮选中状态✅父子联动：自动处理菜单的半选/全选状态逻辑✅类型安全：完整的 TypeScript 类型定义✅性能优化：使用 Map 缓存菜单数据，避免重复查询📁 项目结构概览src/ ├── components/ │ └── MenuAuthModal.vue # 菜单授权弹窗组件 ├── store/ │ └── index.ts # Vuex Store，管理全局按钮权限 └── api/ └── contract.ts # 权限相关 API 接口🔧 核心技术实现1. 组件架构设计采用Ant Design Vue 的 Modal + Tree + Checkbox组合，实现左右分栏布局：template a-modal :visible="visible" div !-- 标题行 -- div div可授权菜单/div div可授权按钮/div /divg