🔐 权限管理

权限管理概述

权限管理是管理后台的核心功能，用于控制用户对系统资源的访问。完善的权限系统可以保护数据安全，防止越权操作。

💡 核心概念

认证（Authentication）：验证用户身份
授权（Authorization）：验证用户是否有权限执行操作

RBAC 权限模型

RBAC（Role-Based Access Control）是基于角色的访问控制，是最常用的权限模型。

概念 说明 示例
用户（User） 系统使用者 张三、李四
角色（Role） 权限的集合 管理员、编辑、普通用户
权限（Permission） 具体操作权限 查看用户、删除文章、导出报表
资源（Resource） 被保护的对象 用户模块、文章模块、订单模块

权限实现方案

1. 菜单权限

根据用户角色动态生成可访问的菜单。

// 根据权限过滤菜单 const filterMenus = (menus, permissions) => { return menus.filter(menu => { if (!menu.permission) return true; return permissions.includes(menu.permission); }).map(menu => ({ ...menu, children: filterMenus(menu.children || [], permissions) })); };

2. 路由权限

通过路由守卫控制页面访问。

// Vue Router 守卫 router.beforeEach((to, from, next) => { const permissions = getPermissions(); if (to.meta.permission && !permissions.includes(to.meta.permission)) { next('/403'); } else { next(); } }); // React Router 守卫 const PrivateRoute = ({ children, permission }) => { const hasPermission = usePermission(permission); return hasPermission ? children : navigate('/403'); };

3. 按钮权限

控制页面内按钮的显示/隐藏。

// 权限指令（Vue） app.directive('permission', { mounted(el, binding) { const { value } = binding; const permissions = getPermissions(); if (value && !permissions.includes(value)) { el.parentNode?.removeChild(el); } } }); // 权限组件（React） const AuthButton = ({ permission, children }) => { const hasPermission = usePermission(permission); return hasPermission ? children : null; };

Token 认证流程

步骤 说明
1. 用户登录 提交用户名密码到后端
2. 后端验证 验证通过后生成 JWT Token
3. 前端存储 将 Token 存储到 localStorage 或 Cookie
4. 请求携带 每次请求在 Header 中携带 Token
5. 后端验证 验证 Token 有效性，返回数据
6. Token 刷新 Token 过期时使用 Refresh Token 刷新

权限管理最佳实践

  • ✅ 前后端双重验证：前端控制 UI，后端控制数据
  • ✅ 最小权限原则：默认无权限，按需分配
  • ✅ 权限缓存：避免频繁请求权限接口
  • ✅ 动态权限：支持运行时更新权限
  • ✅ 操作日志：记录所有敏感操作
  • ✅ Token 安全：使用 HTTPS，设置合理过期时间