前端权限控制需路由级（动态生成/拦截）、组件级（指令/组件控制）和状态管理（存储更新）三层协同，但不能替代后端校验。
前端权限控制不能替代后端校验，但能提升用户体验和安全性。核心思路是：路由加载前检查用户角色/权限，动态生成或拦截路由，配合组件级权限判断。
路由级权限控制（基于角色或权限码）
在路由配置中添加元信息（meta），标识该路由所需的权限。例如：
示例（Vue Router）：routes.js
{ path: '/admin', component: Admin, meta: { requiresAuth: true, roles: ['admin'] } }{ path: '/user/profile', component: Profile, meta: { requiresAuth: true, permissions: ['user:read'] } }
全局前置守卫中读取用户登录状态和权限数据，对比路由 meta 判断是否放行：
立即学习“Java免费学习笔记（深入）”；
- 若未登录，跳转登录页；
- 若已登录但无对应角色或权限，跳转 403 页面或首页；
- 支持异步权限（如从接口拉取权限列表后再 addRoute）；
- 避免硬编码权限字符串，建议统一管理权限常量。
动态路由表（菜单 + 路由同步生成）
用户登录后，后端返回其可访问的菜单和路由配置（或权限标识），前端据此过滤并生成最终路由表：
- 预定义所有路由，但不全部注册；
- 登录成功后请求
/api/user/perms获取权限列表； - 遍历原始路由配置，用权限列表匹配
meta.permissions或meta.roles； - 匹配成功的路由通过
router.addRoute()动态添加； - 侧边菜单也按同样逻辑渲染，保持菜单与路由一致。
组件内细粒度权限控制
路由层拦截后，页面中按钮、操作项仍需二次控制，防止用户手动修改 DOM 或调用 API：
- 封装
v-permission指令（Vue）或PermissionGate组件（React）； - 传入权限码（如
'order:delete'），内部比对当前用户权限数组； - 不满足时隐藏元素或禁用交互（注意：隐藏 ≠ 安全，关键操作仍需后端鉴权）；
- 敏感操作（如删除）建议点击时再校验一次权限，而非仅依赖初始渲染。
权限状态的存储与更新
权限数据需可靠存储，并支持变更后及时响应：
- 登录后存入 Pinia/Vuex/Redux 或 localStorage（注意敏感信息勿明文存）；
- 退出或权限变更时清空路由和权限缓存；
- 监听 token 过期或用户 profile 更新事件，触发权限刷新；
- 避免每次路由跳转都重新请求权限，合理使用缓存（如 5 分钟有效期）。
