# 前端权限控制说明

本文档说明了前端如何根据后端权限设计实现权限控制。

## 权限等级

### 1. 普通用户 (Regular User)
- admin_type: "Regular User"
- problem_permission: "None"
- 只能访问前台功能，无法进入管理后台

### 2. 管理员 (Admin)
- admin_type: "Admin"  
- problem_permission: "None" | "Own" | "All"
- 可以访问部分管理功能

### 3. 超级管理员 (Super Admin)
- admin_type: "Super Admin"
- problem_permission: "All" (自动设置)
- 可以访问所有管理功能

## 权限控制实现

### 1. 用户状态管理 (`src/shared/store/user.ts`)
```typescript
const isAdminRole = computed(() => 
  user.value?.admin_type === USER_TYPE.ADMIN ||
  user.value?.admin_type === USER_TYPE.SUPER_ADMIN
)
const isSuperAdmin = computed(() => 
  user.value?.admin_type === USER_TYPE.SUPER_ADMIN
)
const hasProblemPermission = computed(() => 
  user.value?.problem_permission !== PROBLEM_PERMISSION.NONE
)
```

### 2. 权限工具函数 (`src/utils/permissions.ts`)
提供了一系列权限检查函数：
- `canManageUsers`: 只有super_admin可以管理用户
- `canManageProblems`: 需要题目权限
- `canManageSystemConfig`: 只有super_admin可以管理系统配置
- 等等...

### 3. 路由权限控制 (`src/main.ts`)
在路由守卫中检查权限：
- `requiresAdmin`: 需要admin或super_admin权限
- `requiresSuperAdmin`: 只有super_admin可以访问
- `requiresProblemPermission`: 需要题目管理权限

### 4. 菜单权限控制 (`src/shared/layout/admin.vue`)
根据用户权限动态显示菜单项：
- admin和super_admin都可以看到：题目管理
- 只有super_admin可以看到：比赛管理、用户管理、系统设置、公告管理、评论管理、教程管理

## 各功能模块权限说明

### 用户管理 (需要 super_admin)
- 创建、编辑、删除用户
- 重置用户密码
- 封禁/解封用户
- 批量导入用户

### 题目管理 (需要 problem_permission)
- `problem_permission = "None"`: 无法管理题目
- `problem_permission = "Own"`: 只能管理自己创建的题目
- `problem_permission = "All"`: 可以管理所有题目

### 比赛管理 (super_admin)
- 创建、编辑、删除比赛
- 管理比赛题目
- 查看比赛数据

### 系统配置 (需要 super_admin)
- SMTP邮件配置
- 判题服务器管理
- 网站基本设置
- 测试用例清理

### 公告管理 (需要 super_admin)
- 创建、编辑、删除公告

### 评论管理 (需要 super_admin)
- 查看、删除用户评论

### 教程管理 (需要 super_admin)
- 创建、编辑、删除教程

## 权限检查流程

1. **路由级权限检查**: 在 `main.ts` 的路由守卫中进行
2. **组件级权限检查**: 在组件内部使用 `usePermissions()` 进行检查
3. **UI权限控制**: 根据权限动态显示/隐藏UI元素

## 使用示例

```vue
<script setup lang="ts">
import { usePermissions } from "~/utils/permissions"

const { canManageUsers, isSuperAdmin } = usePermissions()

// 权限检查
if (!canManageUsers.value) {
  message.error("您没有权限访问此页面")
  router.push("/admin")
}
</script>

<template>
  <!-- 根据权限显示不同内容 -->
  <n-button v-if="isSuperAdmin" type="primary">
    超级管理员专用功能
  </n-button>
</template>
```

## 注意事项

1. **前端权限控制只是UI层面的限制**，真正的权限控制在后端
2. **所有API调用都会在后端进行权限验证**
3. **权限信息来自后端用户接口**，前端不应该缓存或修改权限信息
4. **路由权限检查是异步的**，需要等待用户信息加载完成