[原创] SpringBoot + Vue 实现登陆验证码功能

添加依赖

<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

编写配置类
详细配置项参考： https://blog.csdn.net/elephantboy/article/details/52795309

import cn.org.cnhige.title.util.Constant;
import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;

import java.util.Properties;

@Component
public class KaptchaConfig {

    @Bean
    public DefaultKaptcha defaultKaptcha() {
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        // 这里有很多个配置项，不自定义则使用默认配置
        properties.setProperty(Constants.KAPTCHA_BORDER_COLOR,  "black");
        // ...
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }

}

Service层

import javax.servlet.http.HttpServletResponse;

public interface SystemService {

    void getCaptchaImage(HttpServletResponse response);

}

import cn.org.cnhige.title.config.shiro.ShiroConstant;
import cn.org.cnhige.title.service.SystemService;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.session.Session;
import org.apache.shiro.subject.Subject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;

@Service
public class SystemServiceImpl implements SystemService {

    private DefaultKaptcha defaultKaptcha;

    @Autowired
    public void setDefaultKaptcha(DefaultKaptcha defaultKaptcha) {
        this.defaultKaptcha = defaultKaptcha;
    }

    @Override
    public void getCaptchaImage(HttpServletResponse response) {
        String text = defaultKaptcha.createText();
        // 这里使用的是shiro，所以存入session中，也可以存入redis
        Subject subject = SecurityUtils.getSubject();
        Session session = subject.getSession();
        session.setAttribute(ShiroConstant.CAPTCHA, text);
        BufferedImage image = defaultKaptcha.createImage(text);
        try {
            ImageIO.write(image, "jpg", response.getOutputStream());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

Controller层

import cn.org.cnhige.title.service.SystemService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;

@RestController
public class SystemController {

    private SystemService systemService;

    @Autowired
    public void setSystemService(SystemService systemService) {
        this.systemService = systemService;
    }

    @GetMapping("/captcha/image")
    public void getCaptchaImage(HttpServletResponse response) {
        systemService.getCaptchaImage(response);
    }

}

校验

String captcha = loginForm.getCaptcha();
String cacheCaptcha = (String) session.getAttribute(ShiroConstant.CAPTCHA);
if (captcha.equals(cacheCaptcha)) {
    session.removeAttribute(ShiroConstant.CAPTCHA);
} else {
    return ResultUtil.error(ResultEnum.CAPTCHA_ERROR);
}

前端

<image :src="captchaImage" @click="refreshCaptchaImage"></image>
...
captchaImage: "/captcha/image"
...
refreshCaptchaImage: function () {
     this.captchaImage = "/captcha/image?time=" + new Date().getTime().toString();
}

完成效果