Quasar前端用户角色枚举修正方案存档
前端用户角色枚举修正方案存档
一、用户角色枚举定义
/**
* 用户角色枚举（与后端完全同步）
*
* 设计原则:
* 1. 职责分离: 隐患排查与治理分离
* 2. 最小特权: 每个角色仅分配必要权限
* 3. 审计独立: 审计员独立监督
*
* 安全标准:
* - ISO/IEC 27001 信息安全管理
* - NIST RBAC 基于角色的访问控制
*
* 角色层级:
* 隐患排查员(10) < 隐患治理员(15) < 安全管理员(20) < 审计员(30) < 系统管理员(99)
*/
export enum UserRole {
/**
* 隐患排查员
* - 职责: 发现和报告安全隐患
* - 权限: 创建隐患报告、查看自有报告、上传现场照片
* - 限制: 不能分配任务、不能关闭报告
*/
HAZARD_INSPECTOR = 10,
/**
* 隐患治理员 (新增)
* - 职责: 整改验证和闭环管理
* - 权限: 分配整改任务、验证整改结果、关闭隐患
* - 限制: 不能创建新报告、不能修改原始描述
*/
HAZARD_RECTIFIER = 15,
/**
* 安全管理员
* - 职责: 整体安全管理和用户配置
* - 权限: 用户管理、角色分配、系统配置
* - 限制: 不能操作审计日志、不能提升自身权限
*/
SECURITY_ADMIN = 20,
/**
* 安全审计员
* - 职责: 独立审计和监督
* - 权限: 查看所有操作日志、导出审计数据、标记可疑操作
* - 限制: 不能修改业务数据、不能执行管理操作
*/
AUDITOR = 30,
/**
* 系统管理员
* - 职责: 基础设施维护
* - 权限: 服务器管理、备份恢复、系统监控
* - 限制: 不能访问业务数据、操作需双重认证
*/
SYSTEM_ADMIN = 99,
}
二、辅助功能模块
1. 角色工具函数
export namespace UserRole {
/**
* 获取角色显示名称
* @param role 用户角色值
* @returns 本地化的角色名称
*/
export function getLabel(role: UserRole): string {
switch (role) {
case UserRole.HAZARD_INSPECTOR:
return '隐患排查员'
case UserRole.HAZARD_RECTIFIER:
return '隐患治理员'
case UserRole.SECURITY_ADMIN:
return '安全管理员'
case UserRole.AUDITOR:
return '安全审计员'
case UserRole.SYSTEM_ADMIN:
return '系统管理员'
default:
return '未知角色'
}
}
/**
* 检查用户是否有权限执行操作
* @param userRole 当前用户角色
* @param requiredRole 要求的最低角色
* @returns 是否有权限
*/
export function hasPermission(
userRole: UserRole,
requiredRole: UserRole
): boolean {
return userRole >= requiredRole
}
/**
* 获取角色层级中的所有角色
* @param minRole 最低角色（包含）
* @param maxRole 最高角色（包含）
* @returns 角色范围内的角色数组
*/
export function getRolesInRange(
minRole: UserRole = UserRole.HAZARD_INSPECTOR,
maxRole: UserRole = UserRole.SYSTEM_ADMIN
): UserRole[] {
return Object.values(UserRole)
.filter(value => typeof value === 'number')
.map(value => value as UserRole)
.filter(role => role >= minRole && role <= maxRole)
.sort((a, b) => a - b)
}
}
2. 类型安全工具
// 类型守卫函数
export function isValidUserRole(value: number): value is UserRole {
return Object.values(UserRole).includes(value as UserRole)
}
// 角色权限映射
export const RolePermissions = {
[UserRole.HAZARD_INSPECTOR]: [
'hazard:create',
'hazard:read_own',
'attachment:upload'
],
[UserRole.HAZARD_RECTIFIER]: [
'hazard:read_all',
'task:assign',
'hazard:verify',
'hazard:close',
'report:generate'
],
[UserRole.SECURITY_ADMIN]: [
'user:manage',
'role:assign',
'system:configure',
'dashboard:view'
],
[UserRole.AUDITOR]: [
'log:view_all',
'audit:export',
'compliance:report'
],
[UserRole.SYSTEM_ADMIN]: [
'server:manage',
'backup:execute',
'monitor:view'
]
} as const;
/**
* 检查用户是否有特定权限
* @param userRole 用户角色
* @param permission 权限字符串
* @returns 是否有权限
*/
export function hasPermission(
userRole: UserRole,
permission: string
): boolean {
const permissions = RolePermissions[userRole] || []
return permissions.includes(permission as any)
}
三、主要变更说明
1. 角色定义调整
// 变更前
SECURITY_INSPECTOR = 10, // 安全巡检员
// 变更后
HAZARD_INSPECTOR = 10, // 隐患排查员
HAZARD_RECTIFIER = 15, // 新增隐患治理员
2. 功能增强点
- 添加getLabel()方法获取本地化角色名称
- 实现hasPermission()角色层级权限检查
- 新增getRolesInRange()范围角色获取功能
- 增加isValidUserRole()类型安全验证
- 定义RolePermissions权限映射常量
四、使用示例集
1. 角色信息获取
// 获取角色显示名称
const userRole = UserRole.HAZARD_RECTIFIER;
console.log(UserRole.getLabel(userRole)); // 输出: "隐患治理员"
// 获取角色范围
const operationalRoles = UserRole.getRolesInRange(
UserRole.HAZARD_INSPECTOR,
UserRole.AUDITOR
); // [10, 15, 20, 30]
2. 权限控制实现
// 角色层级权限检查
const currentUserRole = UserRole.HAZARD_RECTIFIER;
const canAccessAdmin = UserRole.hasPermission(
currentUserRole,
UserRole.SECURITY_ADMIN
); // false
// 具体权限检查
const canAssignTask = hasPermission(
UserRole.HAZARD_RECTIFIER,
'task:assign'
); // true
const canManageUsers = hasPermission(
UserRole.HAZARD_RECTIFIER,
'user:manage'
); // false
3. 类型安全处理
// API响应处理中的类型验证
api.getUserInfo().then(response => {
const roleValue = response.data.role;
if (isValidUserRole(roleValue)) {
// 类型安全的使用
const userRole: UserRole = roleValue;
// ...业务逻辑处理
} else {
console.error('无效的用户角色:', roleValue);
}
});
五、企业级最佳实践
1. 前后端角色同步策略
- 维护统一的角色定义文档
- 实施自动化同步检查机制
- 建立角色变更通知流程
2. 权限控制应用场景
路由守卫实现
router.beforeEach((to, from, next) => {
const requiredRole = to.meta.requiredRole as UserRole | undefined;
if (requiredRole) {
const userRole = store.state.user.role;
if (!UserRole.hasPermission(userRole, requiredRole)) {
next('/forbidden');
return;
}
}
next();
});
组件权限控制
// Vue组件中使用
const canCloseHazard = computed(() => {
return hasPermission(userRole.value, 'hazard:close');
});
// 模板中使用
<el-button
v-if="canCloseHazard"
@click="handleCloseHazard"
>
关闭隐患
</el-button>
3. 可扩展角色设计
interface RoleDefinition {
id: UserRole;
name: string;
permissions: string[];
minSubRole?: UserRole; // 可管理的下级角色
}
export const RoleDefinitions: Record<UserRole, RoleDefinition> = {
[UserRole.HAZARD_INSPECTOR]: {
id: UserRole.HAZARD_INSPECTOR,
name: '隐患排查员',
permissions: ['hazard:create', 'hazard:read_own'],
minSubRole: UserRole.HAZARD_INSPECTOR
},
// 其他角色定义...
};
// 获取可分配的角色范围
function getAssignableRoles(managerRole: UserRole): UserRole[] {
const { minSubRole } = RoleDefinitions[managerRole];
return UserRole.getRolesInRange(minSubRole, managerRole);
}
4. 审计日志记录
function assignUserRole(userId: string, newRole: UserRole) {
const currentUserRole = store.state.user.role;
if (!UserRole.hasPermission(currentUserRole, newRole)) {
throw new Error('无权分配该角色');
}
// 记录审计日志
auditService.log(
AuditAction.ROLE_CHANGE,
`分配角色: ${UserRole.getLabel(newRole)}`,
{ userId, newRole }
);
// 执行分配操作
api.assignUserRole(userId, newRole);
}
六、变更影响分析
1. 前端界面调整
- 更新所有角色名称显示（"安全巡检员" → "隐患排查员"）
- 添加隐患治理员角色选项与权限配置界面
- 调整权限控制逻辑以适配新角色
- API请求参数更新：支持新角色值传递
- 权限验证逻辑：同步后端权限矩阵
- 测试用例扩展：覆盖新角色场景
- 历史数据迁移：旧角色值自动映射
- 降级处理机制：不识别角色显示"未知角色"
- 版本控制：API响应添加角色版本标识
2. 系统集成要点
3. 兼容性保障
本方案通过规范化的角色定义和权限控制，实现了前端与后端的安全策略统一，新增的隐患治理员角色完善了安全管理闭环，同时保持了系统的可扩展性和类型安全性。
浙公网安备 33010602011771号