Vue 3 Composition API 实战从零搭建可复用的权限控制组件库在现代前端项目中权限管理早已不是简单的“显示/隐藏”按钮而是贯穿整个应用状态流的核心逻辑。使用 Vue 3 的Composition API结合自定义指令与响应式数据我们可以构建一套灵活、易扩展、高内聚的权限控制系统。一、为什么选择 Composition API相比 Options APIComposition API 提供了更清晰的逻辑组织能力尤其适合复杂业务场景下的权限模块拆分与复用。我们不再需要把computed、watch、methods散落在不同选项里而是按功能组织成独立的函数 —— 这正是权限控制所需的结构化思维。// src/composables/usePermission.jsimport{ref,computed}fromvueexportfunctionusePermission(permissions[]){constuserPermissionsref(permissions)constcan(action){returnuserPermissions.value.includes(action)}constcanAny(actions){returnactions.some(actioncan(action))}constcanAll(actions){returnactions.every(actioncan(action))}return{userPermissions,can,canAny,canAll}} ✅ **关键优势** - 权限校验逻辑集中管理 - 支持动态加载权限如登录后拉取 - 可与其他组合式函数无缝集成 --- ### 二、自定义指令实现 DOM 层级权限控制 有时候我们需要直接控制某个元素是否渲染或不可操作这时候可以封装一个v-permission指令js// src/directives/perms.jsimport{inject}fromvueexportdefault{mounted(el,binding){const{value}bindingconstpermissioninject(permission)if(!permission.can(value)){el.style.displaynoneel.setAttribute(data-disabled-by-perm,true)}},updated(el,binding){const{value}bindingconstpermissioninject(permission)if(!permission.can(value)){el.style.displaynone}else{el.style.display}}}#### 使用示例vuetemplatediv v-permissionadmin.deletebutton clickhandleDelete删除用户/button/div!--多权限判断--div v-ifcanAny([admin.create, editor.edit])span您有创建或编辑权限/span/div./templatescript setupimport{provide,reactive}fromvueimport{usePermission}from/composables/usePermissionconstpermissions[user.read,admin.delete]constpermusePermission(permissions)provide(permission,perm)/script效果说明若当前用户无admin.delete权限则该按钮完全不显示若有多个候选权限canAny()确保任意一个满足即可显示内容三、路由守卫中的权限拦截设计进阶除了模板层的权限过滤在页面跳转时也需要进行前置验证。这里利用 Vue Router 的导航守卫 Composition API// src/router/guards/permissionGuard.jsimport{usePermission}from/composables/usePermissionexportfunctioncreatePermissionGuard(router){router.beforeEach((to,from,next){constmetato.metaconstrequiredPermissionmeta.permissionif(!requiredPermission)returnnext()constpermusePermission()if(perm.can(requiredPermission)){next()}else{next(/403)// 跳转到无权限页面}})}#### 在路由配置中添加权限元信息js{path:/users,name:UserList,component:()import(/views/UserList.vue),meta:{title:用户列表,permission:user.read// 必须具备此权限才能访问}} **流程图示意**文本版[用户请求路由] → [匹配路由规则] → [检查 meta.permission]↓[是否有权限]/是 → 继续跳转 否 → redirect to /403四、可复用的权限组件封装最佳实践将权限逻辑封装为通用组件提高开发效率!-- src/components/PermissionWrapper.vue -- template slot v-ifhasPermission / slot v-else namefallback / /template script setup import { inject } from vue defineProps({ action: { type: String, required: true } }) const permission inject(permission0 const hasPermission computed(() permission.can(action)) /script使用方式PermissionWrapper actionadmin.delete button clickdeleteUser删除/button /PermissionWrapper !-- 自定义兜底内容 -- PermissionWrapper actionadmin.delete v-slot{ fallback } button disabled权限不足/button. /PermissionWrapper五、完整项目架构建议推荐目录结构src/ ├── composables/ │ └── usePermission.js # 核心权限逻辑 ├── directives/ │ └── perms.js # 自定义指令 ├── guards/ │ └── permissionGuard.js # 路由守卫 ├── components/ │ └── PermissionWrapper.vue # 权限包裹组件 └── plugins/ └── permissionPlugin.js # 注入依赖的插件 ✅ **插件注册入口main.js** js import { createApp } from vue import App from ./App.vue import { usePermission } from ./composables/usePermission const app createApp(App) app.config.globalProperties.$permission usePermission([user.read]) app.mount(#app0总结这套方案的优势总结特性描述可读性强所有权限判断都集中在usePermission中代码整洁灵活易扩展支持多种策略单权限、多权限、白名单等全链路覆盖模板层 路由层 组件层统一处理性能优化好利用computed缓存结果避免重复计算如果你正在构建企业级系统这套基于 Vue 3 Composition API 的权限体系绝对值得尝试 建议你在实际项目中逐步引入这些模式先从最简单的v-permission指令开始再延伸至路由和组件层面形成一套完整的权限治理闭环。