前后端分离验证码功能

前端代码

<template>      
<el-form-item prop="captcha">
          <div style="display: flex;">
            <el-input style="width: 220px;" placeholder="请输入验证码" size="medium" prefix-icon="el-icon-lock"
                      v-model="user.captcha"></el-input>
            <img :src="captureUrl" @click="getCapture" style="width: 130px;height: 35px;margin-left: 10px"/>
          </div>
        </el-form-item>
</template>

export default {
  data() {
    return {
      //验证码
      captchaKey: '',
      captureUrl: '',
    }
  }


 created() {
    this.captchaKey = Math.random();
    this.captureUrl = "http://localhost:8090/capture/chars?key=" + this.captchaKey;
  },

    //点击图片,刷新验证码
 getCapture() {
    this.captchaKey = Math.random();
    this.captureUrl = "http://localhost:8090/capture/chars?key=" + this.captchaKey;
 }

登陆请求携带验证码的key

     login() {
      this.$refs['userForm'].validate((valid) => {
            if (valid) {  // 表单校验合法
              this.request.post("/user/login?key=" + this.captchaKey, this.user).then(res => {
                    // console.log(res)
                    if (res.code == 200) {
                      this.$router.push("/")
                      this.$message.success("登陆成功")
                      // 将数据存到浏览器中
                      localStorage.setItem("user", JSON.stringify(res.data))
                      localStorage.setItem("menuList", JSON.stringify(res.data.menuList))
                    } else {
                      this.$message.error(res.msg)
                      this.captchaKey = Math.random();
                      this.captureUrl = "http://localhost:8090/capture/chars?key=" + this.captchaKey;
                      this.user.captcha = ''
                    }
                  }
              )
            }
          }
      );
    },

引入依赖

<!--        验证码功能-->
        <dependency>
            <groupId>com.github.whvcse</groupId>
            <artifactId>easy-captcha</artifactId>
            <version>1.6.2</version>
        </dependency>

获取验证码信息

此处使用了redis，用来存储验证码信息，也可定义全局的map对象，用来存储信息

package com.zam.web.controller;

import com.wf.captcha.ArithmeticCaptcha;
import com.wf.captcha.SpecCaptcha;
import com.wf.captcha.utils.CaptchaUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.concurrent.TimeUnit;

/**
 * @Author talent_dog
 * @Date 2024/1/25 15:13
 * @Version 1.0
 */
@RestController
@RequestMapping("/capture")
public class CaptureController {
    @Autowired
    private StringRedisTemplate stringRedisTemplate;

    //验证码
    @GetMapping("/chars")
    public void chars(@RequestParam("key") String key, HttpServletRequest request, HttpServletResponse response) throws IOException {
        //字符验证码
//        SpecCaptcha captcha = new SpecCaptcha(130,35,2);
//        captcha.setCharType(SpecCaptcha.TYPE_NUM_AND_UPPER);
//        //前后端分离系统，session不能使用
//        //存入redis中，便于验证
//        stringRedisTemplate.opsForValue().set(key,captcha.text().toLowerCase(),60, TimeUnit.SECONDS);
//        CaptchaUtil.out(captcha,request,response);

        //算数验证码
        ArithmeticCaptcha captcha = new ArithmeticCaptcha(130, 35, 3);
        captcha.setLen(2);
//        captcha.getArithmeticString(); //获取运算公式
        String value = captcha.text();  //获取结果
        stringRedisTemplate.opsForValue().set(key, value, 60, TimeUnit.SECONDS);
        CaptchaUtil.out(captcha, request, response);
    }
}

用户对象中创建captcha属性，直接获取前端输入的验证码

进行校验