若依前后端分离框架验证码的学习

一.验证码的实现

1.1 前端部分

打开ruoyi-ui模块，在src/views/login.vue存放的就是若依框架的前端登录页面，在created()钩子函数里面有如下两个方法

跟踪进去红色箭头指向的getCode(),源代码如下所示:

    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },

经过简单的阅读可以看到是定义了getCodeImg()方法对后端传过来的图片和uuid进行封装，接下来定位到getCodeImg()方法里面查看

import { getCodeImg } from "@/api/login";

发现这个方法是vue的js的引用，查看src/api/login.js，发现了getCodeImg()方法的源码

// 获取验证码
export function getCodeImg() {
  return request({
    url: '/captchaImage',
    headers: {
      isToken: false
    },
    method: 'get',
    timeout: 20000
  })
}

上面方法主要就是定义一个请求，有点像ajax的请求格式，再继续跟踪进去request方法就可以发现axios请求

而上面的baseURL指的是请求的公共部分，它所定义的公共路径在如下

而我本次运行若依采用的命令是 npm run dev，所以代表的开发环境，进入开发环境的配置类就可以发现公共基础URL的路径

开启若依进行测试

可以看到验证码的请求URL为：http://172.16.7.1/dev-api/captchaImage

也就对应了公共基础的URL+自定义验证码的URL，但是发现有如下问题localhost后面没有端口号，也就是代表的是80端口，而验证码是后端传过来的，正常的话应该是后端的端口，这里后端端口设置为8090，进入vue.config.js文件，发现这里是通过代理的方式进行跨域，如图所示：

pathRewrite将公共URL '/dev-api’替换为空字符串 ‘’ ，再映射到target路径 http://localhost:8090/godAdmin，因此后端得到的路径就是http://localhost:8090/godAdmin/captchaImage

以上就是前端的若依验证码实现的分析，下面去后端查看验证码的实现。

2 后端部分

打开若依的admin主模块，发现里面的代码模块非常多，索引就直接定位到/captchaImage方法里面

这里进入验证码的控制类CaptchaController，发现它的方法上并没有/godAdmin，而前端那边映射的路径是有这一个的，所以应该是配置文件里面进行了全局的配置，查看总配置文件application.yml，发现如下配置

解释了上面图片验证码的路径，下面对CaptchaController的源代码进行分析

对上图方法进行断点，发现一进入登录页面就自动进入此断点，证明这个方法是一定执行的，跟踪进入发现就是统一结果封装类，将统一的格式返回给前端。

接下来就是对验证码的开关进行判断，有验证码的话才往下面走，不然就直接返回结束

有验证码的逻辑如下，将随机的UUID和前缀’captcha_codes:'进行拼接成随机的key，重要的生成验证码的代码如下，并进行debug分析

生成的表达式capText: 0 * 5=?@0，将@前面的0 * 5=?和@后面的0进行分割

然后将verifyKey和code分别作为redis的key和value存储到redis缓存中，并且设置redis缓存的有效时间为2分钟

最后再将UUID和图片返回给前端，前端再对其进行赋值相互对应