162 lines
4.3 KiB
Markdown
162 lines
4.3 KiB
Markdown
# 更新说明
|
||
|
||
## 问题修复
|
||
|
||
### 1. API路由404错误修复
|
||
**问题**：访问 `/api/files` 接口报404错误
|
||
|
||
**原因**：API路由放在了 `src/api` 目录下，但Next.js 13+的App Router要求API路由放在 `src/app/api` 目录下
|
||
|
||
**解决方案**：
|
||
- 将所有API路由从 `src/api` 移动到 `src/app/api`
|
||
- 更新了文件上传、文件管理、认证相关的API路由
|
||
- 添加了 `export const dynamic = 'force-dynamic';` 确保API路由动态渲染
|
||
|
||
### 2. 权限控制系统实现
|
||
**需求**：上传和管理面板需要登录后才可访问，密码可以设置为固定密码
|
||
|
||
**实现方案**：
|
||
|
||
#### 认证系统架构
|
||
- **JWT Token认证**：使用jsonwebtoken库实现基于token的认证
|
||
- **HTTP-only Cookie**：token存储在HTTP-only cookie中，增强安全性
|
||
- **中间件保护**：所有需要认证的API都进行token验证
|
||
|
||
#### 新增功能模块
|
||
|
||
##### 1. 认证API路由
|
||
- `/api/auth/login` - 用户登录
|
||
- `/api/auth/logout` - 用户登出
|
||
- `/api/auth/check` - 检查认证状态
|
||
|
||
##### 2. 认证中间件 (`src/lib/auth.ts`)
|
||
- `authenticateUser()` - 验证用户密码
|
||
- `authenticateRequest()` - 验证请求的token
|
||
- 支持环境变量配置管理员密码
|
||
|
||
##### 3. 认证Hook (`src/hooks/useAuth.ts`)
|
||
- `isAuthenticated` - 认证状态
|
||
- `loading` - 加载状态
|
||
- `login()` - 登录方法
|
||
- `logout()` - 登出方法
|
||
- `checkAuth()` - 检查认证状态
|
||
|
||
##### 4. 登录模态框 (`src/components/LoginModal.tsx`)
|
||
- 密码输入框（支持显示/隐藏）
|
||
- 登录状态反馈
|
||
- 错误提示
|
||
|
||
##### 5. 认证守卫 (`src/components/AuthGuard.tsx`)
|
||
- 保护需要认证的页面
|
||
- 自动重定向到登录页面
|
||
- 登录成功后跳转到原页面
|
||
|
||
#### 权限控制实现
|
||
|
||
##### 1. 文件上传权限
|
||
- 未登录用户显示锁定状态的上传区域
|
||
- 点击上传时弹出登录模态框
|
||
- 登录成功后才能正常上传文件
|
||
|
||
##### 2. 管理面板权限
|
||
- 整个 `/admin` 路由被AuthGuard保护
|
||
- 未登录用户自动显示登录界面
|
||
- 登录后才能访问管理功能
|
||
|
||
##### 3. API权限保护
|
||
- 文件上传API (`/api/upload`) - 需要认证
|
||
- 文件管理API (`/api/files/*`) - 需要认证
|
||
- 文件列表API (`/api/files`) - 公开访问
|
||
|
||
#### 环境变量配置
|
||
|
||
新增环境变量：
|
||
```env
|
||
# Authentication
|
||
ADMIN_PASSWORD="admin123" # 管理员密码，可自定义
|
||
```
|
||
|
||
#### 用户体验优化
|
||
|
||
##### 1. 视觉反馈
|
||
- 未登录时上传区域显示锁定图标和提示
|
||
- 登录按钮在Header中显示
|
||
- 管理员身份标识
|
||
|
||
##### 2. 交互流程
|
||
- 点击需要权限的功能时自动弹出登录框
|
||
- 登录成功后自动跳转到目标页面
|
||
- 登出后自动跳转到首页
|
||
|
||
##### 3. 安全特性
|
||
- Token有效期24小时
|
||
- HTTP-only cookie防止XSS攻击
|
||
- 密码错误时提供友好提示
|
||
|
||
## 使用说明
|
||
|
||
### 默认登录信息
|
||
- **密码**：`admin123`（可在 `.env.local` 中修改）
|
||
|
||
### 登录流程
|
||
1. 点击文件上传区域或访问 `/admin`
|
||
2. 在弹出的登录框中输入密码
|
||
3. 登录成功后即可使用所有功能
|
||
|
||
### 管理员功能
|
||
- 文件上传和管理
|
||
- 文件可见性控制
|
||
- 文件删除
|
||
- 查看统计信息
|
||
|
||
### 安全建议
|
||
1. **修改默认密码**：在生产环境中修改 `ADMIN_PASSWORD`
|
||
2. **使用强密码**：设置复杂的管理员密码
|
||
3. **定期更换**：定期更换管理员密码
|
||
4. **环境保护**：确保 `.env.local` 文件不被提交到版本控制
|
||
|
||
## 技术细节
|
||
|
||
### JWT Token结构
|
||
```typescript
|
||
{
|
||
isAdmin: true,
|
||
timestamp: number,
|
||
iat: number,
|
||
exp: number
|
||
}
|
||
```
|
||
|
||
### Cookie配置
|
||
```typescript
|
||
{
|
||
httpOnly: true,
|
||
secure: process.env.NODE_ENV === 'production',
|
||
sameSite: 'strict',
|
||
maxAge: 60 * 60 * 24, // 24 hours
|
||
path: '/',
|
||
}
|
||
```
|
||
|
||
### 错误处理
|
||
- 密码错误：返回401状态码
|
||
- Token无效：自动清除cookie并要求重新登录
|
||
- 网络错误：显示友好的错误提示
|
||
|
||
## 测试验证
|
||
|
||
### 功能测试
|
||
1. ✅ 未登录用户无法上传文件
|
||
2. ✅ 未登录用户无法访问管理面板
|
||
3. ✅ 登录后可以正常上传文件
|
||
4. ✅ 登录后可以访问管理面板
|
||
5. ✅ 登出后权限被正确收回
|
||
6. ✅ API路由正确响应
|
||
|
||
### 安全测试
|
||
1. ✅ Token验证正常工作
|
||
2. ✅ Cookie安全设置正确
|
||
3. ✅ 密码错误被正确拒绝
|
||
4. ✅ Token过期后需要重新登录
|
||
|
||
系统现在具备完整的权限控制功能，确保只有授权用户才能进行文件上传和管理操作。 |