按钮级权限控制¶
难点:不同角色看到的菜单、能点的按钮不同。前端隐藏按钮只是体验,后端必须再校验一次(否则抓包直接调接口就能删数据)。
最佳实践:登录返回 permissions 数组(权限码),前端用 v-if="has('order:delete')" 控制显隐;后端每个写接口用注解/拦截器校验权限码。
关键点(生产级细节)
- 权限码用
资源:动作粒度(order:delete),别用"管理员/普通用户"粗粒度。 - 封装
v-permission指令 /<Perm code>组件,业务一处声明,全局统一。 - 路由用动态注册(
addRoute),刷新后从接口拉菜单再注册,避免丢失;同时做路由级权限守卫兜底。 - 前端隐藏 ≠ 安全,后端校验是底线(安全专项)。
踩坑
- 只在前端
v-if隐藏,没后端校验 → 抓包改请求直接越权(高危)。 - 权限数据缓存到 localStorage,用户被降级后仍是旧权限 → 登录/角色变更时强制刷新权限。
- 菜单从接口拉,但路由表里写死所有 path → 越权用户可直接输 URL 进页面 → 需路由守卫二次校验。