前端权限系统怎么做才不会写吐？我们项目踩过的 3 套失败方案总结 上线前两个月，我们的权限系统崩了三次。 不是接口没权限，而是： 页面展示和真实权限不一致；权限判断写得四分五裂；权限数据和按钮逻辑耦合得死死的，测试一改就炸。于是，我们老老实实把整个权限体系拆了重构，从接口到路由、到组件、到 v-permission 指令，走了一遍完整的流程。 结果：「代码可维护，调试容易，后端调整也能快速兜底。」 这篇文章不讲理论，「只还原我们项目真踩过的 3 套失败方案和最终落地方案。」 ? 第一套：按钮级权限直接写死在模板里当时我们的写法是这样的： !-- 用户管理页 -- el-buttonv-if="authList.includes('user:add')"添加用户/el-button 接口返回的是一个权限数组： ["user:add","user:delete","user:list"] 然后整个项目几十个地方都这么判断。 结果： 不能重用，每个组件都判断一次；权限粒度变更就全崩，比如从user:add改成user:add_user；后端权限更新后，前端要全局搜索权限 key 改代码；「典型的“写起来爽，维护时哭”方案。」 ? 第二套：用 router.meta.permission 统一控制，结果太抽象重构后我们尝试统一控制页面级权限： // router.ts { path:'/user', component: User, meta: { permission:'user:list' } } 再通过导航守卫： router.beforeEach((to,from, next) ={ constp = to.meta.permission if(p && !authList.includes(p)) { returnnext('/403') } next() }) 这个方案页面级权限是解决了，但「组件级 / 按钮级 / 表单字段级」全都失效了。 而且你会发现，大量页面是“同路由但不同内容区域权限不同”，导致这种meta.permission方案显得太粗暴。 ? 第三套：封装权限组件，结果被吐槽“反人类”当时我们团队有人设计了一个组件： Permission code="user:add" el-button添加用户/el-button /Permission 这个组件内部逻辑是： constslots = useSlots() if(!authList.includes(props.code))returnnull returnslots.default() 结果： 逻辑上看似没问题，但使用非常反直觉；特别是嵌套多个组件时，调试麻烦，断点打不进真实组件；TypeScript 报类型错误，编辑器无法识别 slot 类型；更麻烦的是，权限失效的时候，组件不会渲染，开发环境都看不到是为什么！最终方案：hook + 指令 + 路由统一层级设计我们最后把权限体系重构为 3 层： ??1. 接口统一管理权限 key → 后端返回精简列表（扁平权限）exporttypeAuthCode = |'user:add' |'user:delete' |'user:edit' |'order:export' |'dashboard:view' 服务端返回用户权限集，保存在authStore（Pinia / Vuex / Context）中。 ??2. 统一 Hook 调用：usePermission(code)import{ useAuthStore }from'@/store/auth' exportfunctionusePermission(code:string):boolean{ conststore = useAuthStore() returnstore.permissionList.includes(code) } 用法： el-buttonv-if="usePermission('user:add')"添加用户/el-button 这才是真正组件内部逻辑干净、容易复用、TS 支持的方案。 ??3. 封装一个 v-permission 指令（可选）app.directive('permission', { mounted(el, binding) { constauthList = getUserPermissions()// 从全局 store 获取 if(!authList.includes(binding.value)) { el.remove() } } }) 模板中使用： el-buttonv-permission="'order:export'"导出订单/el-button 适合动态组件、render 生成的按钮，「不适合复杂嵌套逻辑」，但实际项目中效果拔群。 ?? 页面级权限怎么做？不再用router.meta，而是把每个路由页封装为权限包裹组件： template PermissionViewcode="dashboard:view" Dashboard/ /PermissionView /template 权限组件内部处理： 没权限 → 自动跳转 403有权限 → 渲染内容这样即使权限接口变了，组件逻辑也统一保留，「避免页面空白或者闪跳」。 权限这事，不是实现难，而是维护难。「最核心的不是你怎么控制显示，而是权限 key 的一致性、复用性、分层能力。」 最终我们稳定版本满足了： 页面、按钮、字段统一接入权限新增权限点只需要改枚举，不需要大改新人接手也能一眼看懂逻辑，能调试AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文