若依RuoYi-Vue项目实战：手把手教你给后台管理系统加上短信登录（Spring Security深度适配）-平芜编程栈

若依RuoYi-Vue项目实战：Spring Security深度整合短信登录全流程解析

在当今企业级后台管理系统开发中，多因素认证已成为提升安全性的标配方案。本文将基于若依(RuoYi-Vue)这一流行开源框架，详细拆解如何在不破坏原有账号密码体系的前提下，优雅地集成短信验证码登录功能。不同于简单的API对接，我们将重点解决Spring Security架构下的身份认证流程改造问题，特别针对实际开发中容易遇到的用户查询SQL优化、异常处理规范等痛点提供工业级解决方案。

1. 技术方案设计与核心组件

1.1 Spring Security认证流程重构

Spring Security的默认认证流程基于UsernamePasswordAuthenticationFilter设计，要实现短信登录需要理解其核心扩展点：

// 认证流程伪代码 AuthenticationManager.authenticate() → AuthenticationProvider.supports() → AuthenticationProvider.authenticate() → UserDetailsService.loadUserByUsername()

针对短信登录的特殊性，我们需要定制以下组件：

自定义Token：替代UsernamePasswordAuthenticationToken
专属Provider：处理短信验证码认证逻辑
扩展UserDetailsService：支持手机号查询用户

1.2 关键类关系设计

组件类型	默认实现	短信登录实现	职责说明
AuthenticationToken	UsernamePasswordAuthenticationToken	SmsCodeAuthenticationToken	封装认证请求信息
AuthenticationProvider	DaoAuthenticationProvider	SmsCodeAuthenticationProvider	执行具体认证逻辑
UserDetailsService	默认实现	UserDetailsByPhonenumberServiceImpl	按手机号加载用户信息

2. 核心代码实现

2.1 自定义认证Token实现

创建继承自AbstractAuthenticationToken的短信认证Token：

public class SmsCodeAuthenticationToken extends AbstractAuthenticationToken { private final Object principal; // 存储手机号码 public SmsCodeAuthenticationToken(Object principal) { super(null); this.principal = principal; setAuthenticated(false); } @Override public Object getCredentials() { return null; // 验证码已在前置校验环节处理 } // 其他必要方法实现... }

注意：这里credentials返回null是因为验证码校验应在进入Provider前完成

2.2 用户查询服务增强

改造用户查询服务，确保手机号查询与用户名查询保持相同安全级别：

@Service("userDetailsByPhonenumber") public class UserDetailsByPhonenumberServiceImpl implements UserDetailsService { @Autowired private ISysUserService userService; @Override public UserDetails loadUserByUsername(String phoneNumber) { SysUser user = userService.selectUserByPhonenumber(phoneNumber); // 状态检查逻辑与账号密码登录保持一致 if (user == null) { throw new ServiceException("手机号未注册"); } // 账户状态校验逻辑... return createLoginUser(user); } }

对应的Mapper查询应添加适当索引：

ALTER TABLE sys_user ADD INDEX idx_phonenumber (phonenumber);

3. Spring Security配置改造

3.1 认证提供者注册

在Security配置类中注入自定义组件：

@Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Bean public SmsCodeAuthenticationProvider smsCodeAuthenticationProvider() { return new SmsCodeAuthenticationProvider(userDetailsService); } @Override protected void configure(AuthenticationManagerBuilder auth) { auth.authenticationProvider(smsCodeAuthenticationProvider()); } }

3.2 认证入口配置

添加短信登录专属端点：

@Override protected void configure(HttpSecurity http) throws Exception { http.addFilterBefore( new SmsCodeAuthenticationFilter(authenticationManager()), UsernamePasswordAuthenticationFilter.class); // 原有配置保持不变... }

4. 业务层关键实现

4.1 验证码发送服务

实现带防刷机制的验证码发送：

@PostMapping("/sendSmsCode/{phoneNumber}") public AjaxResult sendSmsCode(@PathVariable String phoneNumber) { // 频率控制（Redis实现） String rateLimitKey = "sms:limit:" + phoneNumber; Long count = redisTemplate.opsForValue().increment(rateLimitKey); if (count != null && count == 1) { redisTemplate.expire(rateLimitKey, 1, TimeUnit.MINUTES); } if (count > 3) { throw new ServiceException("操作过于频繁"); } // 生成并发送验证码 String code = generateRandomCode(); smsService.send(phoneNumber, code); // 存储验证码（带时效） String uuid = UUID.randomUUID().toString(); redisTemplate.opsForValue().set( "sms:code:" + uuid, code, 5, TimeUnit.MINUTES); return AjaxResult.success().put("uuid", uuid); }

4.2 登录接口实现

@PostMapping("/smsLogin") public AjaxResult smsLogin(@RequestBody SmsLoginDto dto) { // 验证码校验 String cacheCode = redisTemplate.opsForValue() .get("sms:code:" + dto.getUuid()); if (!dto.getSmsCode().equals(cacheCode)) { throw new CaptchaException(); } // 执行Spring Security认证 Authentication authentication = authenticationManager.authenticate( new SmsCodeAuthenticationToken(dto.getPhoneNumber())); // 生成JWT令牌 LoginUser loginUser = (LoginUser) authentication.getPrincipal(); String token = tokenService.createToken(loginUser); return AjaxResult.success().put(Constants.TOKEN, token); }

5. 前端适配与联调技巧

5.1 Vue组件改造要点

在登录页面添加短信登录选项卡：

<el-tabs v-model="activeTab"> <el-tab-pane label="账号密码" name="password"> <!-- 原有表单 --> </el-tab-pane> <el-tab-pane label="短信登录" name="sms"> <el-form @submit.native.prevent="handleSmsLogin"> <el-form-item prop="phoneNumber"> <el-input v-model="smsForm.phoneNumber" placeholder="手机号"/> </el-form-item> <el-form-item prop="smsCode"> <el-input v-model="smsForm.smsCode" placeholder="验证码"> <template #append> <el-button @click="sendSmsCode" :disabled="isCountingDown"> {{ countdown > 0 ? `${countdown}s` : '获取验证码' }} </el-button> </template> </el-input> </el-form-item> </el-form> </el-tab-pane> </el-tabs>

5.2 常见联调问题排查

跨域问题：确保新增接口在Spring Security的白名单中
认证流程中断：检查过滤器链顺序是否正确
Redis键冲突：使用命名空间隔离不同业务的缓存键
事务一致性：用户查询与登录记录要保持原子性

6. 生产环境增强建议

6.1 安全加固措施

启用HTTPS防止验证码被截获
实施IP风控策略（如Fail2ban）
添加图形验证码二次验证
敏感操作增加短信二次确认

6.2 性能优化方案

// 使用管道化操作提升Redis性能 List<Object> results = redisTemplate.executePipelined( (RedisCallback<Object>) connection -> { for (String key : keys) { connection.get(key.getBytes()); } return null; });

对于高并发场景，建议：