分享前端权限体系设计

架构总览

config/roles.ts         配置层 ─ 定义"谁"
    └─ UserType / TYPE_HIERARCHY / TYPE_META / hasRole()
config/routes.ts        配置层 ─ 定义"哪些页面"
    └─ PageDef[] / renderRoutes() / deriveSidebar() / validateRoutes()
    │
App.tsx                 生成层 ─ 自动生成 <Route> 树
AdminSidebar            生成层 ─ 自动生成侧边栏菜单
UserSidebar / DeveloperSidebar  同上
RequireAuth / AdminGuard        权限路由守卫

核心原则：两处配置，全自动联动。

• 改角色 → 只改 roles.ts
• 改页面 → 只改 routes.ts
• 不需要改 App.tsx、Sidebar、Guards

一、角色体系 (config/roles.ts)

1.1 用户类型

export const USER_TYPES = ['user', 'developer', 'admin'] as const;
export type UserType = (typeof USER_TYPES)[number];

1.2 层级（数字越大权限越高）

export const TYPE_HIERARCHY: Record<UserType, number> = {
  user: 0,        // 普通用户
  developer: 1,   // 开发者（自动拥有 user 权限）
  admin: 2,       // 管理员（自动拥有 developer + user 权限）
};

层级递进逻辑：admin > developer > user。hasRole('admin', 'developer') 返回 true。

1.3 元数据

export const TYPE_META: Record<UserType, TypeMeta> = {
  user:      { label: '普通用户', shortLabel: '用户', color: 'bg-gray-100...', icon: 'fa-user' },
  developer: { label: '开发者',   shortLabel: '开发者', color: 'bg-emerald-100...', icon: 'fa-code' },
  admin:     { label: '管理员',   shortLabel: '管理员', color: 'bg-blue-100...',  icon: 'fa-shield-alt' },
};

1.4 权限检查

hasRole(userType, 'admin')      // user?.type === 'admin'
hasRole(userType, 'developer')  // user?.type === 'developer' || 'admin'
isAdmin(userType)               // 快捷方式
isDeveloper(userType)           // 快捷方式

1.5 Navbar 角色入口

用户在 Navbar 下拉菜单看到的额外入口：

NAVBAR_ROLE_LINKS: [
  { path: '/admin', icon: 'fa-shield-alt', label: '后台管理', minType: 'admin' },
  { path: '/developer', icon: 'fa-code', label: '开发者中心', minType: 'developer' },
]