1. vue请求url说明
验证码的请求url:2. 验证码实现流程
2.1 通过登录页面中的关键词找到验证码在login.vue中,并定位到生成验证码相关的方法getCode()
2.2 通过getCode()找到getCodeImg()
2.3 通过IDEA全局搜索"/captchaImage"找到后端对应的controller方法
(1)CaptchaController.getCode
@GetMapping("/captchaImage")
public AjaxResult getCode(HttpServletResponse response) throws IOException
{
AjaxResult ajax = AjaxResult.success();
// 获取验证码开关(true:开启 false:关闭)
boolean captchaOnOff = configService.selectCaptchaOnOff();
// 设置captchaOnOff
ajax.put("captchaOnOff", captchaOnOff);
// 如果captchaOnOff为false,即如果关闭验证,直接返回
if (!captchaOnOff)
{
return ajax;
}
// 如果captchaOnOff为true,即如果开启验证
// 生成uuid
String uuid = IdUtils.simpleUUID();
// 生成Redis中的验证码key
String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;
String capStr = null, code = null;
BufferedImage image = null;
// 获取验证类型(验证类型(math:数值验证 char:字符验证)可在application.yml中进行配置)
String captchaType = RuoYiConfig.getCaptchaType();
if ("math".equals(captchaType))
{
// 例:capText 为 5+7=?@12, capStr 为 5+7=?, code 为 12
String capText = captchaProducerMath.createText();
capStr = capText.substring(0, capText.lastIndexOf("@"));
code = capText.substring(capText.lastIndexOf("@") + 1);
// 生成图片
image = captchaProducerMath.createImage(capStr);
}
else if ("char".equals(captchaType))
{
// 例:生成"xmg7"
capStr = code = captchaProducer.createText();
// 生成图片
image = captchaProducer.createImage(capStr);
}
// 将验证码的值存入Redis,过期时间是2分钟
redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
// 转换流信息写出
FastByteArrayOutputStream os = new FastByteArrayOutputStream();
try
{
ImageIO.write(image, "jpg", os);
}
catch (IOException e)
{
return AjaxResult.error(e.getMessage());
}
// 设置uuid,设置Base64编码的图片(前端会通过Base64解码)
ajax.put("uuid", uuid);
ajax.put("img", Base64.encode(os.toByteArray()));
return ajax;
}
-
验证码类型为math:
-
验证码类型为char:
(2)SysConfigServiceImpl.selectCaptchaOnOff
public boolean selectCaptchaOnOff()
{
// 获取参数值
String captchaOnOff = selectConfigByKey("sys.account.captchaOnOff");
// 如果captchaOnOff为空,则返回true,表示开启验证
if (StringUtils.isEmpty(captchaOnOff))
{
return true;
}
// 将String转为boolean
return Convert.toBool(captchaOnOff);
}
(3)SysConfigServiceImpl.selectConfigByKey
public String selectConfigByKey(String configKey)
{
// 根据configKey从Redis缓存中获取参数值,并将Object转为String
String configValue = Convert.toStr(redisCache.getCacheObject(getCacheKey(configKey)));
// 如果缓存中有参数值,则直接返回参数值
if (StringUtils.isNotEmpty(configValue))
{
return configValue;
}
// 如果缓存中没有参数值,则从MySQL数据库查询参数值
SysConfig config = new SysConfig();
config.setConfigKey(configKey);
SysConfig retConfig = configMapper.selectConfig(config);
// 如果MySQL中retConfig不为空,则将参数值存入Redis缓存中,并返回参数值
if (StringUtils.isNotNull(retConfig))
{
redisCache.setCacheObject(getCacheKey(configKey), retConfig.getConfigValue());
return retConfig.getConfigValue();
}
// MySQL、Redis中均不存在参数值,返回空字符串
return StringUtils.EMPTY;
}
2.4 前端响应处理
2.5 点击登录后,最终会在SysLoginService.validateCaptcha中进行验证
public void validateCaptcha(String username, String code, String uuid)
{
// 根据Constants.CAPTCHA_CODE_KEY和uuid,从Redis中获取验证码的值
String verifyKey = Constants.CAPTCHA_CODE_KEY + StringUtils.nvl(uuid, "");
String captcha = redisCache.getCacheObject(verifyKey);
// 删除Redis中的验证码
redisCache.deleteObject(verifyKey);
// captcha为空,说明验证码已失效
if (captcha == null)
{
// 记录登录失败日志并抛异常(失败信息为"验证码已失效")
AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.expire")));
throw new CaptchaExpireException();
}
if (!code.equalsIgnoreCase(captcha))
{
// 记录登录失败日志并抛异常(失败信息为"验证码错误")
AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.jcaptcha.error")));
throw new CaptchaException();
}
}