Spring Boot + Angular带邮箱验证的用户注册登录实现方案咨询

注册流程核心步骤 #

• 前端（Angular）：用Reactive Forms完成注册表单的前端校验（邮箱格式、密码强度、字段非空等），校验通过后将用户信息（邮箱、密码等）POST到后端接口
• 后端（Spring Boot）：
  1. 校验邮箱是否已注册，已注册则返回错误提示
  2. 生成唯一验证令牌（UUID即可），将用户状态设为「未激活」，把用户信息、令牌、令牌过期时间（比如24小时后）存入数据库
  3. 调用邮件发送工具，给用户邮箱发送包含验证链接的邮件（链接格式：/api/auth/verify?token=xxx）
• 验证环节：用户点击邮件链接后，后端接收令牌参数，查询数据库匹配未激活用户：
  • 令牌有效且未过期：将用户状态改为「已激活」，返回成功提示，前端跳转至登录页
  • 令牌无效/过期：返回错误，引导用户重新发送验证邮件

登录流程完善点 #

• 后端校验用户状态：登录时先检查用户是否已激活，未激活则返回提示，引导用户完成邮箱验证
• 身份凭证返回：登录成功后生成JWT令牌（推荐）返回给前端，前端将令牌存储在HttpOnly Cookie（更安全，防XSS）或localStorage中
• 后续请求校验：前端发起接口请求时自动携带令牌，后端用Spring Security校验令牌有效性，实现权限控制

推荐工具&库 #

Spring Boot 端 #

• Spring Security：一站式处理身份验证、权限控制，集成JWT非常便捷
• JavaMailSender：Spring原生邮件发送组件，配置邮箱SMTP地址、账号密码即可快速发送验证邮件
• JJWT：轻量级JWT生成/解析库，API简洁易上手
• Validation API：通过注解（@Email、@NotBlank等）完成后端参数校验
• Thymeleaf：作为邮件模板引擎，生成带样式的验证邮件，比硬写字符串更灵活

Angular 端 #

• Reactive Forms：继续用它完成注册/登录表单的前端校验逻辑
• HttpClient：与后端进行HTTP请求交互
• ngx-cookie-service：若选择用Cookie存储JWT，可快速操作Cookie；用localStorage则直接用原生API即可
• Angular Router：处理验证成功、登录成功后的页面跳转逻辑

注意事项 #

• 验证令牌必须设置过期时间，避免长期有效带来的安全风险
• 增加「重新发送验证邮件」的前端按钮，后端需限制发送频率（比如1分钟内只能发送一次），防止邮件接口被滥用
• JWT优先存在HttpOnly Cookie中，相比localStorage能有效避免XSS攻击窃取令牌

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