图片验证码实现

1.前端生成UUID(key)，发起请求

methods: {
                createUuid() {
                    var s = [];
                    var hexDigits = "0123456789abcdefghi";
                    for (var i = 0; i < 36; i++) {
                        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                    }
                    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                    s[8] = s[13] = s[18] = s[23] = "-";

                    var uuid = s.join("");
                    return uuid;
                },
                getImageCode() {
                    //发送请求到后台获取数据  VerifycodeController
                    let imageCodeKey = sessionStorage.getItem("registerImageCodeKey");
                    if (!imageCodeKey || imageCodeKey === '') {
                        imageCodeKey = this.createUuid();
                        sessionStorage.setItem("registerImageCodeKey", imageCodeKey);
                    }
                    this.$http.get("/common/verifycode/imageCode/" + imageCodeKey).then(res => {
                        //res.data :就是base64编码后的图片的字符串
                        this.imageCode = this.imageCodePrefix + res.data.data;
                    })
                }
}

2.后端生成图片验证码，把生成的验证码存在redis中的key，返回前端base64编码后的图片验证码

controller接收请求

@GetMapping(value="/imageCode/{redisKey}")
public JSONResult getVerifycode(@PathVariable("redisKey")String redisKey){
   String base64Img = verifycodeService.getVerifycode(redisKey);
   return JSONResult.success(base64Img);
}

service

/**
  * @param redisKey 把生成的验证码存在redis中的key
  * @return 返回base64编码后的图片验证码
  */
String getVerifycode(String redisKey);

具体步骤

1.判断redisKey是否为空

2.生成一个随机字符串作为验证码

3.把生成的验证码存在redis中的key

4.把这个验证码的值写入一个图片中

5.对这个图片进行base64编码返回给前端

impl

需要注入

@Autowired
private RedisTemplate<Object,Object> redisTemplate;
    
@Autowired
private ImageVerifycodeProperties imageProperties;

@Override
public String getVerifycode(String redisKey) {

    // 1.判断redisKey是否为空
    if (StrUtil.isBlank(redisKey)){
       throw new GolbalException("无效请求，请重试");
    }
    // 2.生成一个随机字符串作为验证码
    String code = StrUtils.getComplexRandomString(imageProperties.getLength());
    // 3.把生成的验证码存在redis中的key
    redisTemplate.opsForValue().set(redisKey,code,imageProperties.getExpire(), TimeUnit.SECONDS);
    // 4.把这个验证码的值写入一个图片中
    String base64Img = VerifyCodeUtils.verifyCode(imageProperties.getWidth(), imageProperties.getHeight(), code);
    // 5.对这个图片进行base64编码返回给前端
    return base64Img;
}