参考若依开源项目，学习验证码的实现。

基本思路

后端生成表达式：6-4=2

6-4=？@2

• 6-4=？（验证问题）生成图片，传给前端进行展示

  

• 2（答案）传给Redis

key值在前端，对应的答案在redis

前端

getCode() {
    getCodeImg().then(res => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (this.captchaOnOff) {
            //获取验证图片
            this.codeUrl = "data:image/gif;base64," + res.img;
            //对应redis中验证码数据的key值
            this.loginForm.uuid = res.uuid;
        }
    });
},

//login.js
// 获取验证码
export function getCodeImg() {
  return request({
    url: '/captchaImage',
    headers: {
      isToken: false
    },
    method: 'get',
    timeout: 20000
  })

http://localhost/dev-api/captchaImage 前端

Vue获取图片的对象，是前端还是后端

反向代理，url请求前端，进行代理，映射到后端，解决跨域问题

前端解决

//vue.config.js
//配置反向代理，解决跨域问题
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        //后端接口
        target: `http://localhost:8080`,
        changeOrigin: true,
        //路径重写
        pathRewrite: {
          //获取统一前缀：process.env.VUE_APP_BASE_API，并且替换成'',在映射成http://localhost:8080
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

http://localhost/dev-api/captchaImage 前端

//经过映射

http://localhost:8080/dev-api/captchaImage 后端

后端

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
import javax.annotation.Resource;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import com.ruoyi.common.config.RuoYiConfig;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.FastByteArrayOutputStream;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import com.google.code.kaptcha.Producer;
import com.ruoyi.common.constant.Constants;
import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.common.core.redis.RedisCache;
import com.ruoyi.common.utils.sign.Base64;
import com.ruoyi.common.utils.uuid.IdUtils;
import com.ruoyi.system.service.ISysConfigService;

/**
 * 验证码操作处理
 * 
 * @author ruoyi
 */
@RestController
public class CaptchaController
{
    @Resource(name = "captchaProducer")
    private Producer captchaProducer;

    @Resource(name = "captchaProducerMath")
    private Producer captchaProducerMath;

    @Autowired
    private RedisCache redisCache;
    
    @Autowired
    private ISysConfigService configService;
    /**
     * 生成验证码
     */
    @GetMapping("/captchaImage")
    public AjaxResult getCode(HttpServletResponse response) throws IOException
    {
        // 统一返回类，类似我的R类
        AjaxResult ajax = AjaxResult.success();
        // 获取验证码是否打开
        boolean captchaOnOff = configService.selectCaptchaOnOff();
        ajax.put("captchaOnOff", captchaOnOff);
        if (!captchaOnOff)
        {
            // 未开启直接返回
            return ajax;
        }

        // 保存验证码信息
        // 生成验证码UUID类型的key值
        String uuid = IdUtils.simpleUUID();
        //拼接格式为 "captcha_codes:{{uuid}}"
        String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;

        String capStr = null, code = null;
        BufferedImage image = null;

        // 生成验证码
        String captchaType = RuoYiConfig.getCaptchaType();
        if ("math".equals(captchaType))
        {
            //生成验证码文本：1+1=@2
            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))
        {
            capStr = code = captchaProducer.createText();
            image = captchaProducer.createImage(capStr);
        }

        // 将key值和答案存入redis缓存，有效期两分钟
        redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
        // 转换流信息写出
        FastByteArrayOutputStream os = new FastByteArrayOutputStream();
        try
        {
            // 写成 jpg 图片
            ImageIO.write(image, "jpg", os);
        }
        catch (IOException e)
        {
            return AjaxResult.error(e.getMessage());
        }

        ajax.put("uuid", uuid);
        ajax.put("img", Base64.encode(os.toByteArray()));
        return ajax;
    }
}

参考

bilibili-楠哥