React应用带邮件发送的密码重置功能实现问题求助

前端忘记密码页现存可优化点 #

• 邮箱字段校验缺失：项目虽引入了isEmail校验工具，但输入框的validations规则仅配置了必填项，没有增加邮箱格式校验，无效格式的内容会直接提交到后端
• 提示样式区分不足：所有接口返回的消息（含成功、失败提示）都套用了错误类的样式，用户无法直观识别操作结果
• 重复提交防护不足：按钮disabled逻辑仅绑定了loading状态，未做请求节流，容易出现短时间多次触发接口提交的问题
• 网络异常兜底不足：未针对接口超时、断网等异常场景做统一的用户提示处理

AuthController 接口逻辑现存bug #

• 数据库查询方法调用参数缺失：Users.checkEmailExist(result) 未传入待查询的邮箱参数，当前写法完全无法触发查库逻辑
• 异步流程时序错误：调用Mails.SendMail发送邮件后，未等待邮件发送结果就直接返回成功响应，哪怕邮件投递失败，前端也会收到成功提示
• 重置码无有效期控制：仅将随机生成的10位字符串存入用户表，未设置过期时间，重置链接永久有效会带来较高的安全风险
• 业务状态码混用：邮箱未注册的场景错误返回了会话过期类的状态码，前端无法做正确的逻辑分支判断
• 全局变量污染：updateData 未用let/const声明，会自动挂载为全局变量，容易引发其他逻辑的变量覆盖问题

MailController 邮件模块现存bug #

• 作用域逻辑错误：smtpTransport.sendMail回调中调用的res对象不存在——邮件模块是被AuthController内部调用的，没有把接口层的req/res对象透传进来，执行到这里会直接抛出res is undefined的运行错误
• 语法运行错误：邮件发送成功分支的消息字符串未闭合，"message": 'Password reset successful. 缺少单引号和逗号，这类语法错误会直接导致后端服务无法正常启动
• 数据库连接泄漏：如果用户记录中不存在first_name字段，代码会跳过connection.release()逻辑，长期运行会把连接池的连接占满，导致服务不可用
• 模板替换冗余：连续三次替换同一个[[PASSWORD_RESET_URL]]占位符，属于无意义的重复逻辑
• 错误处理缺失：查询用户、查询邮件模板的数据库操作出现错误时，仅打印日志，既不向上层透传错误，也不释放数据库连接

全流程跑通的落地步骤 #

1. 修正模块调用的传参逻辑：给Mails.SendMail增加回调参数，把邮件发送的成功/失败结果透传回AuthController，不要在邮件模块内部直接处理接口响应
2. 修正所有语法错误：包括未闭合的字符串、漏传的数据库方法参数、未声明的变量，先保证后端服务可以正常启动无报错
3. 补全重置码的有效期校验逻辑：生成重置码时，同时存入当前时间+15分钟的过期时间戳，后续校验重置码的接口先判断是否过期，过期则提示链接失效
4. 补全React端的重置密码落地页：实现路由/resetPassword/:code，包含新密码输入、重置码有效性校验、提交新密码的完整逻辑
5. 完善前端校验规则：把邮箱格式校验加入输入框的validations数组，区分成功、失败提示的样式，优化用户反馈体验

体验与安全优化建议 #

• 统一接口返回结构：全流程各节点的响应格式保持一致，避免混用不同的状态码
• 增加接口防刷限制：同一个邮箱60秒内最多允许触发一次密码重置请求，避免被恶意刷取邮件
• 统一前端提示话术：将所有邮箱相关的返回提示调整为“如果该邮箱已完成注册，我们会向该邮箱发送重置链接”，不要明确告知用户邮箱是否存在，避免被恶意遍历平台注册用户
• 完善提交节流逻辑：前端在按钮触发提交后直到接口返回前，全程保持按钮disabled状态，避免重复提交

内容的提问来源于stack exchange，提问作者Bliss AK