【学习】若依源码（前后端分离版）之 “ 验证码功能及登录功能实现”

浅谈若伊验证码功能及登录功能实现。既然能刷到这篇文章，代表你应该也知道若依是用来干嘛的了，只是可能你还没那么理解。刚好最近有些时间，想重头开始重新阅读这个框架，故开创这个系列，希望能和你们一起学习，共同进步！（关注我，不迷路(❁´◡`❁)）

鸣蜩铃兰香

3225人浏览 · 2023-08-02 17:08:59

鸣蜩铃兰香 · 2023-08-02 17:08:59 发布

大型纪录片：学习若依源码（前后端分离版）之 “ 验证码功能及登录功能实现”

前言
验证码模块
- 前端代码实现
- 后端代码实现
登录模块
- 前端代码实现
- 后端代码实现
总结

前言

既然能刷到这篇文章，代表你应该也知道若依是用来干嘛的了，只是可能你还没那么理解，刚好最近有些时间，想重头开始重新阅读这个框架，故开创这个系列，希望能和你们一起学习，共同进步！（关注我，不迷路(❁´◡`❁)）

验证码模块

验证码生成的主要步骤：

前端发出请求
后端生成一个表达式，如3+1=4
表达式的形式实际上是 3+1=?@4
3+1=? 转成图片，4存入Redis

前端代码实现

验证码是在登录的时候用到，所以我们看到login.vue

根据这里给出的信息，我们可以发现验证码是和loginform里面的code绑定在一起。下方div装着的就是对应着验证码的图片啦。

可以看到图片上面还有一个单击事件，顾名思义就是获取、刷新验证码图片的。我们来看看这个方法

如图所示，在页面创建的时候，会主动调用一次该方法（因为我们进入页面的时候，验证码是要加载好的），在点击图片的时候，该函数会向引入的"@/api/login"里面去找对应的方法去发送请求。并返回一个promise对象。

这里解释一下为什么是返回request呢？我们顺藤摸瓜发现这个request是被封装过的，再进入request.js我们可以看到以下：

request 吉尔斯里面封装了axios

‘/dev-api’ 为统一前缀

由图六可见，captchaImage请求有个统一前缀dev-api，并且请求的是localhost:80，也就是请求的是前端。这其实是为了解决跨域问题，若依是在前端通过反向代理来解决的，URL请求前端，然后再映射到后端，具体配置见vue.config.js文件。

这里可以看到前缀被替换为空了，然后统一换成了localhost：8080

后端代码实现

顺藤摸瓜根据前端给出的路径，我们找到了“/ captchaImage”方法。这个方法就是核心的验证码实现方法了，判断是否打开了验证码，使用了什么类型的验证码，并生成验证码放入redis。这里我把代码贴出来，供大家学习：

 /**
     * 生成验证码
     */
    @GetMapping("/captchaImage")
    public AjaxResult getCode(HttpServletResponse response) throws IOException
    {
        AjaxResult ajax = AjaxResult.success();
        boolean captchaOnOff = configService.selectCaptchaOnOff();
        ajax.put("captchaOnOff", captchaOnOff);
        if (!captchaOnOff)
        {
            return ajax;
        }

        // 保存验证码信息
        String uuid = IdUtils.simpleUUID();
        String verifyKey = Constants.CAPTCHA_CODE_KEY + uuid;

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

        // 生成验证码
        String captchaType = RuoYiConfig.getCaptchaType();
        if ("math".equals(captchaType))
        {
            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);
        }

        redisCache.setCacheObject(verifyKey, code, Constants.CAPTCHA_EXPIRATION, TimeUnit.MINUTES); //captcha_expiration 表示验证码过期时间
        // 转换流信息写出
        FastByteArrayOutputStream os = new FastByteArrayOutputStream();
        try
        {
            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;
    }