**Vue 3 Composition API 实战：从零搭建可复用的权

Vue 3 Composition API 实战：从零搭建可复用的权限控制组件库

在现代前端项目中，权限管理早已不是简单的“显示/隐藏”按钮，而是贯穿整个应用状态流的核心逻辑。使用 Vue 3 的Composition API结合自定义指令与响应式数据，我们可以构建一套灵活、易扩展、高内聚的权限控制系统。

一、为什么选择 Composition API？

相比 Options API，Composition API 提供了更清晰的逻辑组织能力，尤其适合复杂业务场景下的权限模块拆分与复用。我们不再需要把computed、watch、methods散落在不同选项里，而是按功能组织成独立的函数 —— 这正是权限控制所需的结构化思维。

// src/composables/usePermission.jsimport{ref,computed}from'vue'exportfunctionusePermission(permissions=[]){constuserPermissions=ref(permissions)constcan=(action)=>{returnuserPermissions.value.includes(action)}constcanAny=(actions)=>{returnactions.some(action=>can(action))}constcanAll=(actions)=>{returnactions.every(action=>can(action))}return{userPermissions,can,canAny,canAll}}```> ✅ **关键优势**： > > - 权限校验逻辑集中管理 > > - 支持动态加载权限（如登录后拉取） > > - 可与其他组合式函数无缝集成 --- ### 二、自定义指令实现 DOM 层级权限控制 有时候我们需要直接控制某个元素是否渲染或不可操作，这时候可以封装一个`v-permission`指令：```js// src/directives/perms.jsimport{inject}from'vue'exportdefault{mounted(el,binding){const{value}=bindingconstpermission=inject('permission')if(!permission.can(value)){el.style.display='none'el.setAttribute('data-disabled-by-perm','true')}},updated(el,binding){const{value}=bindingconstpermission=inject('permission')if(!permission.can(value)){el.style.display='none'}else{el.style.display=''}}}```#### 使用示例：```vue<template><div v-permission="'admin.delete'"><button @click="handleDelete">删除用户</button></div><!--多权限判断--><div v-if="canAny(['admin.create', 'editor.edit'])"><span>您有创建或编辑权限</span></div.</template><script setup>import{provide,reactive}from'vue'import{usePermission}from'@/composables/usePermission'constpermissions=['user.read','admin.delete']constperm=usePermission(permissions)provide('permission',perm)</script>

📌效果说明：

• 若当前用户无'admin.delete'权限，则该按钮完全不显示
• • 若有多个候选权限，canAny()确保任意一个满足即可显示内容

三、路由守卫中的权限拦截设计（进阶）

除了模板层的权限过滤，在页面跳转时也需要进行前置验证。这里利用 Vue Router 的导航守卫 + Composition API：

// src/router/guards/permissionGuard.jsimport{usePermission}from'@/composables/usePermission'exportfunctioncreatePermissionGuard(router){router.beforeEach((to,from,next)=>{constmeta=to.metaconstrequiredPermission=meta.permissionif(!requiredPermission)returnnext()constperm=usePermission()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-if="hasPermission" /> <slot v-else name="fallback" /> </template> <script setup> import { inject } from 'vue' defineProps({ action: { type: String, required: true } }) const permission = inject('permission'0 const hasPermission = computed(() => permission.can(action)) </script>

使用方式：

<PermissionWrapper action="admin.delete"> <button @click="deleteUser">删除</button> </PermissionWrapper> <!-- 自定义兜底内容 --> <PermissionWrapper action="admin.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('#app'0

总结：这套方案的优势总结

如果你正在构建企业级系统，这套基于 Vue 3 Composition API 的权限体系绝对值得尝试！

👉 建议你在实际项目中逐步引入这些模式，先从最简单的v-permission指令开始，再延伸至路由和组件层面，形成一套完整的权限治理闭环。