成果展示：

说明： 此处使用的是EasyCaptcha来生成Base64来给前端显示，可去gitee上去查找更多生成的验证码样式

Maven所需要的依赖

<dependency>
      <groupId>com.github.whvcse</groupId>
      <artifactId>easy-captcha</artifactId>
      <version>1.6.2</version>
   </dependency>

生成的验证码结果 存入Redis 设置失效时间用于登录验证。

注意：有权限验证的项目需要放开此请求连接 ‘/captchaImage’

 @GetMapping("/captchaImage")
    public AjaxResult getCode(HttpServletResponse response) throws IOException
    {
        // 唯一标识
        String uuid = IdUtils.simpleUUID();
        String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;
        //生成验证码 
        //111（宽） 36 （高） 4（生成的长度）
        SpecCaptcha specCaptcha = new SpecCaptcha(111, 36, 4);
        //生成的验证码
        String verifyCode = specCaptcha.text().toLowerCase();
        //并设置验证码失效时间为2分钟
        redisCache.setCacheObject(verifyKey, verifyCode, 					Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES);
        AjaxResult ajax = AjaxResult.success();
        ajax.put("uuid", uuid);
        ajax.put("codeUrl",  specCaptcha.toBase64());
        return ajax;
    }

前端vue只需要将返回的img 放入src属性即可,无需做任何处理,不用拼接base64前缀

登录时根据设置进去的uuid 取Redis缓存中的 验证码内容与提交的内容对比即可完成登录