1. vue请求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();
        }
    }