mirror of
https://github.com/GSManagerXZ/GameServerManager.git
synced 2026-06-09 01:14:45 +08:00
305 lines
10 KiB
Markdown
305 lines
10 KiB
Markdown
# HTTP 安全警告和令牌管理功能实现总结
|
||
|
||
## 实现的功能
|
||
|
||
### 1. 登录页 HTTP 安全警告 ✅
|
||
|
||
**文件**: `client/src/pages/LoginPage.tsx`
|
||
|
||
**功能**:
|
||
- 检测用户是否使用 HTTP 协议访问面板
|
||
- **首次访问时自动弹出安全警告模态框**（带淡入淡出动画）
|
||
- **常驻显示"环境不安全"按钮**（左上角，带慢速脉冲动画）
|
||
- 点击"环境不安全"按钮可随时查看安全警告详情
|
||
- 警告内容包括：
|
||
- HTTP 访问的安全风险说明（数据传输未加密、凭证可能被截获等）
|
||
- 安全建议（配置 HTTPS、仅在内网使用、定期更换密码等）
|
||
- 安全配置限制提示
|
||
- 使用 localStorage 记录用户已确认首次警告
|
||
- 符合面板风格的弹窗设计
|
||
|
||
**关键代码**:
|
||
```typescript
|
||
// 检测 HTTP 访问并显示安全警告（仅首次自动弹出）
|
||
useEffect(() => {
|
||
const isHttp = window.location.protocol === 'http:'
|
||
const dismissed = localStorage.getItem('httpWarningDismissed') === 'true'
|
||
|
||
if (isHttp) {
|
||
setShowHttpWarning(true)
|
||
if (!dismissed) {
|
||
// 首次访问，延迟显示弹窗
|
||
const timer = setTimeout(() => {
|
||
setHttpWarningDismissed(false)
|
||
}, 500)
|
||
return () => clearTimeout(timer)
|
||
} else {
|
||
// 已经确认过，不自动弹出
|
||
setHttpWarningDismissed(true)
|
||
}
|
||
}
|
||
}, [])
|
||
|
||
// 常驻的"环境不安全"按钮
|
||
{showHttpWarning && (
|
||
<button
|
||
onClick={handleShowHttpWarning}
|
||
className="fixed top-4 left-4 px-4 py-2 bg-orange-600/90 hover:bg-orange-700/90
|
||
text-white rounded-lg animate-pulse-slow"
|
||
>
|
||
<AlertTriangle className="w-4 h-4" />
|
||
<span>环境不安全</span>
|
||
</button>
|
||
)}
|
||
```
|
||
|
||
### 2. 设置页面安全配置限制 ✅
|
||
|
||
**文件**: `client/src/pages/SettingsPage.tsx`
|
||
|
||
**功能**:
|
||
- 检测当前访问协议（HTTP/HTTPS）
|
||
- HTTP 访问时在安全配置区域显示醒目的警告横幅
|
||
- **HTTP 访问时的限制**：
|
||
- 令牌到期时间：最大 24 小时（可修改，但不能超过 24）
|
||
- 永不到期选项：禁用
|
||
- 令牌重置规则：可自由选择（启动时重置/过期自动重置）
|
||
- 重置令牌按钮：可用
|
||
- **HTTPS 访问时无限制**：
|
||
- 令牌到期时间：最大 8760 小时（1年）
|
||
- 所有选项均可自由配置
|
||
- 尝试设置超过限制时显示友好的提示消息
|
||
- 显示当前访问环境的限制信息
|
||
|
||
**关键代码**:
|
||
```typescript
|
||
const handleSecurityConfigChange = (updates) => {
|
||
const newConfig = { ...securityConfig, ...updates }
|
||
|
||
// HTTP 访问时限制最大 24 小时
|
||
if (isHttpAccess && updates.tokenExpireHours !== null && updates.tokenExpireHours !== undefined) {
|
||
if (updates.tokenExpireHours > 24) {
|
||
addNotification({
|
||
type: 'warning',
|
||
title: '设置受限',
|
||
message: 'HTTP 访问时令牌到期时间最大为 24 小时'
|
||
})
|
||
newConfig.tokenExpireHours = 24
|
||
}
|
||
}
|
||
|
||
// HTTP 访问时禁止设置永不到期
|
||
if (isHttpAccess && updates.tokenExpireHours === null) {
|
||
addNotification({
|
||
type: 'warning',
|
||
title: '操作受限',
|
||
message: 'HTTP 访问时不允许设置永不到期，请使用 HTTPS 访问'
|
||
})
|
||
return
|
||
}
|
||
// ... 正常处理逻辑
|
||
}
|
||
```
|
||
|
||
### 3. 重置令牌功能优化 ✅
|
||
|
||
**文件**: `server/src/routes/security.ts`
|
||
|
||
**功能**:
|
||
- **随时可用的令牌重置功能**（不再依赖重置规则）
|
||
- 点击重置按钮立即重新生成 JWT 密钥
|
||
- 所有现有令牌立即失效
|
||
- 用户需要重新登录
|
||
- 记录操作日志
|
||
|
||
**关键代码**:
|
||
```typescript
|
||
// 重置JWT密钥（随时可用）
|
||
router.post('/reset-token', authenticateToken, async (req: Request, res: Response) => {
|
||
try {
|
||
// 重新生成JWT密钥，使所有现有令牌失效
|
||
await configManager.regenerateJWTSecret()
|
||
|
||
logger.info('JWT密钥已手动重新生成，所有现有令牌已失效')
|
||
|
||
res.json({
|
||
success: true,
|
||
message: 'JWT密钥已重新生成，所有现有令牌将失效，请重新登录'
|
||
})
|
||
} catch (error) {
|
||
logger.error('重置令牌失败:', error)
|
||
res.status(500).json({
|
||
success: false,
|
||
message: '重置令牌失败'
|
||
})
|
||
}
|
||
})
|
||
```
|
||
|
||
### 4. 开发者工具强制修改令牌到期时间 ✅
|
||
|
||
**文件**: `client/src/modules/developer/components/DeveloperToolsPanel.tsx`
|
||
|
||
**功能**:
|
||
- 在开发者工具页面新增"强制修改令牌到期时间"功能
|
||
- 显示当前安全配置（重置规则、到期时间）
|
||
- 允许开发者绕过 HTTP 限制强制修改令牌到期时间
|
||
- 包含醒目的警告提示，说明这是开发者专用功能
|
||
- 输入验证（1-8760 小时）
|
||
- 实时更新配置并显示成功/失败消息
|
||
|
||
**关键代码**:
|
||
```typescript
|
||
const handleForceUpdateTokenExpire = async () => {
|
||
if (tokenExpireHours <= 0) {
|
||
addNotification({
|
||
type: 'error',
|
||
title: '输入错误',
|
||
message: '令牌到期时间必须大于0'
|
||
})
|
||
return
|
||
}
|
||
|
||
const result = await apiClient.updateSecurityConfig({
|
||
tokenResetRule: currentConfig?.tokenResetRule || 'expire',
|
||
tokenExpireHours: tokenExpireHours
|
||
})
|
||
// ... 处理结果
|
||
}
|
||
```
|
||
|
||
## 技术实现细节
|
||
|
||
### 协议检测
|
||
- 使用 `window.location.protocol` 检测访问协议
|
||
- 在组件挂载时执行检测
|
||
- 使用 React state 管理检测结果
|
||
|
||
### 状态管理
|
||
- 登录页使用 localStorage 存储警告确认状态（持久化）
|
||
- 设置页使用 React state 管理 HTTP 访问状态
|
||
- 开发者工具使用 API 获取实时配置
|
||
- HTTP 访问时自动触发安全配置强制更新
|
||
|
||
### UI/UX 设计
|
||
- 所有弹窗都有淡入淡出动画（animate-fade-in/animate-fade-out）
|
||
- "环境不安全"按钮带慢速脉冲动画（animate-pulse-slow）
|
||
- 使用 Lucide React 图标库（AlertTriangle, Shield, Clock 等）
|
||
- 遵循面板现有的设计风格（card-game, btn-game 等）
|
||
- 颜色语义化：橙色表示警告，红色表示危险，蓝色表示信息
|
||
- 常驻按钮设计：固定在左上角，不遮挡主要内容
|
||
|
||
### 安全考虑
|
||
- HTTP 访问时自动强制切换为 24 小时令牌重置模式
|
||
- HTTP 访问时禁用安全配置修改（除重置令牌外）
|
||
- 重置令牌功能保持可用，方便紧急情况处理
|
||
- 开发者工具需要额外认证才能访问
|
||
- 所有 API 调用都需要认证令牌
|
||
- 提供清晰的安全风险说明和强制配置信息
|
||
|
||
## 测试建议
|
||
|
||
### 1. HTTP 访问测试
|
||
```bash
|
||
# 使用 HTTP 访问面板
|
||
http://localhost:3000/login
|
||
```
|
||
- 验证登录页首次访问时自动弹出安全警告
|
||
- 验证登录页左上角显示"环境不安全"按钮（带脉冲动画）
|
||
- 验证点击"环境不安全"按钮可重新查看警告详情
|
||
- 验证设置页显示 HTTP 访问限制警告横幅
|
||
- **验证令牌重置规则可以自由选择**
|
||
- **验证令牌到期时间可以修改（1-24 小时）**
|
||
- **验证输入超过 24 小时会自动限制为 24 并提示**
|
||
- **验证永不到期选项被禁用，点击时显示提示**
|
||
- **验证重置令牌按钮可用，点击后所有令牌失效**
|
||
|
||
### 2. HTTPS 访问测试
|
||
```bash
|
||
# 使用 HTTPS 访问面板
|
||
https://localhost:3000/login
|
||
```
|
||
- 验证登录页不显示"环境不安全"按钮
|
||
- 验证登录页不自动弹出安全警告
|
||
- 验证设置页安全配置可正常修改
|
||
- 验证可以自由设置令牌重置规则和到期时间
|
||
- **验证令牌到期时间最大值为 8760 小时（1年）**
|
||
- **验证重置令牌按钮可用，点击后所有令牌失效**
|
||
|
||
### 3. 令牌重置测试
|
||
- 在设置页点击"重置令牌"按钮
|
||
- 验证显示成功消息："JWT密钥已重新生成，所有现有令牌将失效，请重新登录"
|
||
- 验证当前会话立即失效
|
||
- 验证需要重新登录才能继续使用
|
||
- 验证其他已登录的会话也同时失效
|
||
|
||
### 4. 开发者工具测试
|
||
- 访问开发者工具页面
|
||
- 验证可以查看当前安全配置
|
||
- 验证可以强制修改令牌到期时间
|
||
- 验证修改后配置立即生效
|
||
|
||
### 5. 令牌到期测试
|
||
- 设置令牌到期时间为 1 小时
|
||
- 等待 1 小时后验证令牌自动失效
|
||
- 验证需要重新登录
|
||
|
||
## 相关文件
|
||
|
||
### 前端文件
|
||
- `client/src/pages/LoginPage.tsx` - 登录页（HTTP 警告 + 常驻按钮）
|
||
- `client/src/pages/SettingsPage.tsx` - 设置页（安全配置限制 + 强制 24 小时重置）
|
||
- `client/src/modules/developer/components/DeveloperToolsPanel.tsx` - 开发者工具（强制修改）
|
||
- `client/src/utils/api.ts` - API 客户端（安全配置 API）
|
||
- `client/src/index.css` - 样式文件（慢速脉冲动画）
|
||
|
||
### 后端文件
|
||
- `server/src/routes/security.ts` - 安全配置路由
|
||
- `server/src/modules/config/ConfigManager.ts` - 配置管理器
|
||
- `server/src/modules/auth/AuthManager.ts` - 认证管理器
|
||
|
||
## 注意事项
|
||
|
||
1. **HTTP 警告仅在首次访问时自动弹出**，用户确认后会记录在 localStorage 中，但"环境不安全"按钮会常驻显示
|
||
2. **"环境不安全"按钮常驻在登录页左上角**，用户可随时点击查看安全警告详情
|
||
3. **HTTP 访问时自动强制切换为 24 小时令牌重置模式**，无需手动设置
|
||
4. **HTTP 访问时令牌到期时间最大 24 小时，HTTPS 访问时最大 8760 小时**
|
||
5. **设置页的限制是实时的**，切换协议后立即生效
|
||
6. **重置令牌功能随时可用**，不依赖重置规则，点击后立即使所有令牌失效
|
||
7. **重置令牌后需要重新登录**，包括当前会话和其他已登录的会话
|
||
8. **开发者工具需要额外认证**，确保只有授权用户可以访问
|
||
9. **令牌到期时间的修改会立即生效**，影响所有新生成的令牌
|
||
10. **慢速脉冲动画**通过 CSS keyframes 实现，3 秒一个周期
|
||
|
||
## 后续优化建议
|
||
|
||
1. 添加 HTTPS 配置向导，帮助用户快速配置证书
|
||
2. 在系统信息中显示当前访问协议和安全状态
|
||
3. 添加令牌到期时间的历史记录
|
||
4. 支持多种令牌到期策略（按用户、按设备等）
|
||
5. 添加令牌使用情况的统计和监控
|
||
6. 支持自定义 HTTP 访问时的强制令牌到期时间（目前固定为 24 小时）
|
||
7. 添加访问协议切换的日志记录
|
||
|
||
## 新增 CSS 动画
|
||
|
||
**文件**: `client/src/index.css`
|
||
|
||
```css
|
||
/* 慢速脉冲动画 */
|
||
@keyframes pulse-slow {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.animate-pulse-slow {
|
||
animation: pulse-slow 3s ease-in-out infinite;
|
||
}
|
||
```
|
||
|
||
此动画用于"环境不安全"按钮，提供柔和的视觉提示效果。
|