添加登录验证码功能 - 增强系统安全性

## 新增功能
- 密码输错2次后自动显示验证码
- 4位数字验证码,点击可刷新
- 验证码有效期5分钟
- 基于IP和用户名双重防护
- 前台和后台登录均支持

## 后端改动
- 新增验证码生成API: GET /api/captcha
- 修改登录API支持验证码验证
- 添加session管理验证码
- 增强RateLimiter防爆破机制

## 前端改动
- 登录表单添加验证码输入框(条件显示)
- 验证码图片展示和刷新功能
- 自动触发验证码显示逻辑

## 依赖更新
- 新增: svg-captcha (验证码生成)
- 新增: express-session (session管理)

## 文档
- CAPTCHA_FEATURE.md - 详细功能文档
- CAPTCHA_README.md - 快速开始指南
- test_captcha.sh - 自动化测试脚本
- 更新说明_验证码功能.txt - 中文说明

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-21 16:32:32 +00:00
parent 619b965cf8
commit 61c99ce5c0
9 changed files with 971 additions and 16 deletions

View File

@@ -22,7 +22,8 @@ createApp({
// 表单数据
loginForm: {
username: '',
password: ''
password: '',
captcha: ''
},
registerForm: {
username: '',
@@ -30,6 +31,10 @@ createApp({
password: ''
},
// 验证码相关
showCaptcha: false,
captchaUrl: '',
// SFTP配置表单
ftpConfigForm: {
ftp_host: '',
@@ -321,6 +326,10 @@ handleDragLeave(e) {
this.user = response.data.user;
this.isLoggedIn = true;
// 登录成功后隐藏验证码并清空验证码输入
this.showCaptcha = false;
this.loginForm.captcha = '';
// 保存token到localStorage
localStorage.setItem('token', this.token);
localStorage.setItem('user', JSON.stringify(this.user));
@@ -378,9 +387,20 @@ handleDragLeave(e) {
}
} catch (error) {
this.errorMessage = error.response?.data?.message || '登录失败';
// 检查是否需要显示验证码
if (error.response?.data?.needCaptcha) {
this.showCaptcha = true;
this.refreshCaptcha();
}
}
},
// 刷新验证码
refreshCaptcha() {
this.captchaUrl = `${this.apiBase}/api/captcha?t=${Date.now()}`;
},
async handleRegister() {
this.errorMessage = '';
this.successMessage = '';