若依后台框架验证码登陆模块源码理解（前端）

登陆验证 

思路
1.后端生成一个表达式 例如：1+1=2 1+1=?@2 1+1=?转成图片，传到前端进行展示

答案：2存入Reids

代码实现过程

获取验证码：（

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

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

this.codeUrl = "data:image/gif;base64," + res.img; 赋值一个验证码图片
this.loginForm.uuid = res.uuid;  传一个识别码（uuid）放在表单（loginForm）里面

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

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

vue和spring交互一般用阿贾克斯（axios）
getCodeImg()方法：

创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 10000
})

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 10000
})

在axios方法被封装了两次
axios>request>getCodeImg()>getCode()

url: '/captchaImage'：通过前端的反向代理解决了跨域问题

 proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }

proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
//重写路径
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

target："需要映射的路径"，

pathRewrite（路径重写）:{'^' + process.env.VUE_APP_BASE_API}：''}
 

//重写路径
 pathRewrite: { 
    ['^' + process.env.VUE_APP_BASE_API]: ''
        }
）

['^' + process.env.VUE_APP_BASE_API]: '  '：vue的.env.development开发者环境中的统一前缀（/dev-api) 替换成‘  ’ 在映射到8080端。

原先地址：http://localhost/dev-api/captchaImage

反向代理以后的地址：http://localhost:8080/captchaImage

如果理解的有问题请提出来