Springboot + Vue 多用户并发同时登录验证码失效导致阻塞的解决方案

前段时间做了一个学校教学的项目，测试的时候无论是学生还是老师登录，都能登录，但是上线后当一个班的几十名学生同时登录的时候，会出现大面积验证码错误无法登录一直阻塞的问题，于是我赶紧去翻了下源码进行排查，让我们先来看下有问题的源码是怎么样的。

前端打开登陆页面时获取验证码图片的接口代码

// 对查询所有人员信息前先生成验证码，让前端来请求并校验
    // 生成验证码图片==》响应一个 base64 字符串
    @GetMapping("/getImage")
    public String getImageCode(HttpServletRequest request) throws IOException {
   
        //1.使用工具类生成验证码(包括image和code)
        Map<String, Object> imageCode = VerifyUtil.createImageCode();
        String code = (String) imageCode.get("code");

        //2.将验证码放入servletContext作用域（前后端分离是没有session概念的）
        request.getServletContext().setAttribute("yCode", code);

        BufferedImage image = (BufferedImage) imageCode.get("image");
        //3.将图片转化为base64
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        //5.响应给浏览器  ImageIO ：工具类
        ImageIO.write(image, "png", outputStream);
        String encode = Base64Utils.encodeToString(outputStream.toByteArray());

        return encode;
    }

然后是点击登录按钮，进行验证码校验时的接口代码

// 登录界面比对验证码