✨ 添加登录验证码功能 - 增强系统安全性
## 新增功能 - 密码输错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:
@@ -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 = '';
|
||||
|
||||
Reference in New Issue
Block a user