文章分享了项目在权限系统重构过程中的经验教训。上线前两个月，权限系统崩溃三次，问题包括页面展示与真实权限不一致、权限判断分散、权限数据和按钮逻辑耦合严重。文章详细介绍了三种失败的方案：按钮级权限写死在模板、使用 router.meta.permission 控制页面级权限、封装权限组件但使用反直觉。最终方案采用 hook + 指令 + 路由统一层级设计，分为接口统一管理权限 key、统一 Hook 调用、封装 v-permission 指令，并说明了页面级权限的实现方式。文章强调权限控制的核心在于权限 key 的一致性、复用性和分层能力。

🔹 第一套失败方案：将按钮级权限直接写死在模板中，导致权限代码重复，难以维护，且权限粒度变更时会导致全崩。

🔹 第二套失败方案：尝试使用 router.meta.permission 统一控制页面级权限，但过于抽象，组件级、按钮级、表单字段级权限失效，且无法处理同路由不同内容区域权限不同的场景。

🔹 第三套失败方案：封装权限组件，但使用反直觉，嵌套组件调试困难，TypeScript 报类型错误，权限失效时组件不渲染，开发环境难以排查原因。

🔹 最终方案：采用 hook + 指令 + 路由统一层级设计，分为接口统一管理权限 key、统一 Hook 调用、封装 v-permission 指令，并说明页面级权限的实现方式，实现了权限的统一管理和维护。

🔹 文章强调权限控制的核心在于权限 key 的一致性、复用性和分层能力，最终方案满足了页面、按钮、字段统一接入权限，新增权限点只需修改枚举，无需大改，新人接手也能快速理解逻辑和调试。

原创 ErpanOmer 2025-07-01 08:31 重庆

点击关注公众号，技术干货及时达！

后端权限更新后，前端要全局搜索权限 key 改代码；

「典型的“写起来爽，维护时哭”方案。」

❌ 第二套：用 router.meta.permission 统一控制，结果太抽象重构后我们尝试统一控制页面级权限：

// router.ts{  path: '/user',  component: User,  meta: {    permission: 'user:list'  }}

再通过导航守卫：

router.beforeEach((to, from, next) => {  const p = to.meta.permission  if (p && !authList.includes(p)) {    return next('/403')  }  next()})

这个方案页面级权限是解决了，但「组件级 / 按钮级 / 表单字段级」全都失效了。

而且你会发现，大量页面是“同路由但不同内容区域权限不同”，导致这种 

meta.permission

 方案显得太粗暴。