使用SpringBoot + Vue + Redis实现验证码登录功能全过程

    /**
     * 后台生成图形验证码 ：有效
     * @param response
     * @param key
     */
    @GetMapping(value = "/randomImage/{key}")
    public Result randomImage(HttpServletResponse response, @PathVariable("key") String key){
        logger.info("进入后台生成图形验证码方法 ...");
        JSONObject jsonObject = new JSONObject();
        try {
            //生成验证码
            String code = RandomUtil.randomString(BASE_CHECK_CODES,4);
            //存到redis中
            String lowerCaseCode = code.toLowerCase();
            // 加入密钥作为混淆，避免简单的拼接，被外部利用，用户自定义该密钥即可
            logger.info("RedisKey: {}", key);
            String keyPrefix = Md5Util.md5Encode(key + SIGNATURE_SECRET, "utf-8");
            String realKey = keyPrefix + lowerCaseCode;
            redisUtil.removeAll(keyPrefix);
            redisUtil.set(realKey, lowerCaseCode, 60);
            logger.info("获取验证码，Redis key = {}，checkCode = {}", realKey, code);
            
            //返回前端
            String base64 = RandImageUtil.generate(code);
            jsonObject.put("base64", base64);
            return Result.ok().data(jsonObject);
        } catch (Exception e) {
            logger.error(e.getMessage(), e);
            return Result.error().code(ResultCode.GET_VERIFY_CODE_ERROR.getCode())
                    .message(ResultCode.GET_VERIFY_CODE_ERROR.getMessage());
        }
    }

    /**
     * 生成base64字符串
     * @param resultCode
     * @return
     * @throws IOException
     */
    public static String generate(String resultCode) throws IOException {
        BufferedImage image = getImageBuffer(resultCode);
        ByteArrayOutputStream byteStream = new ByteArrayOutputStream();
        //写入流中
        ImageIO.write(image, IMG_FORMAT, byteStream);
        //转换成字节
        byte[] bytes = byteStream.toByteArray();
        //转换成base64串
        String base64 = Base64.getEncoder().encodeToString(bytes).trim();
        //删除 \r\n
        base64 = base64.replaceAll("\n", "").replaceAll("\r", "");
        //写到指定位置
        //ImageIO.write(bufferedImage, "png", new File(""));
        return BASE64_PRE+base64;
    }

    @RequestMapping(value = "/Login/userLogin", method = RequestMethod.POST)
    public Result loginSystem(@RequestBody SysLoginModel sysLoginModel, HttpServletRequest request) {
        log.info("用户登录开始:{}", sysLoginModel);
        String captcha = sysLoginModel.getCaptcha();
        String checkKey = sysLoginModel.getCheckKey();
        if(captcha==null){
            return Result.error().code(ResultCode.VERIFY_CODE_ERROR.getCode())
                    .message(ResultCode.VERIFY_CODE_ERROR.getMessage());
        }
        String lowerCaseCaptcha = captcha.toLowerCase();
        String realKey = Md5Util.md5Encode(checkKey + SIGNATURE_SECRET, "utf-8") + lowerCaseCaptcha;
        Object checkCode = redisUtil.get(realKey);
        log.info("Redis存储验证码: {} , 用户输入验证码: {}", checkCode , lowerCaseCaptcha);
        if(checkCode == null || !checkCode.equals(lowerCaseCaptcha)) {
            return Result.error().code(ResultCode.VERIFY_CODE_NOT_EXIST.getCode()).message(ResultCode.VERIFY_CODE_NOT_EXIST.getMessage());
        }
       }

<el-form-item prop="captcha">
<div class="captcha-box">
  <el-input
	v-model="form.captcha"
	placeholder="验证码"
	prefix-icon="el-icon-key"
  />
  <div class="captcha-img">
	<img
	  v-if="randCodeData.requestCodeSuccess"
	  style="margin-top: 2px; max-width: initial"
	  :src="randCodeData.randCodeImage"
	  @click="handleChangeCheckCode"
	/>
  </div>
</div>
</el-form-item>

    handleChangeCheckCode() {
      const _this = this;
      this.randCodeData.checkKey =
        new Date().getTime() + Math.random().toString(36).slice(-4); 
      this.$axios
        .getRandomImage(_this.randCodeData.checkKey)
        .then(function (resp) {
          if (resp.code == 200) {
            _this.randCodeData.randCodeImage = resp.data.base64;
            _this.randCodeData.requestCodeSuccess = true;
          } else {
            _this.$message.error(resp.message);
          }
        });
    },