SpringBoot + Vue 后台管理系统（三）：Kaptc

验证码作用

• 防止广告机注册等操作
• 防止暴力破解

Kaptcha验证码

• 引入第三方库

<!--kaptcha 验证码 -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

• 配置文件

/**
 * @Author Bertram.wang
 * @Date 2019年5月12日 下午10:48:58
 * @sign KaptchaConfig.java
 */
@Configuration
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha defaultKaptcha() {
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        // 字体
        properties.setProperty(Constants.KAPTCHA_TEXTPRODUCER_FONT_NAMES, "宋体,楷体,微软雅黑");
        properties.setProperty(Constants.KAPTCHA_BORDER, "no");
        
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    } 
}

配置参数：

package com.google.code.kaptcha;

public class Constants
{
    
    public final static String KAPTCHA_SESSION_KEY = "KAPTCHA_SESSION_KEY";

    public final static String KAPTCHA_SESSION_DATE = "KAPTCHA_SESSION_DATE";

    public final static String KAPTCHA_SESSION_CONFIG_KEY = "kaptcha.session.key";

    public final static String KAPTCHA_SESSION_CONFIG_DATE = "kaptcha.session.date";
    // 图片边框，合法值：yes , no
    public final static String KAPTCHA_BORDER = "kaptcha.border";
    // 边框颜色，合法值： rgb (and optional alpha) 或者 white,black,blue.
    public final static String KAPTCHA_BORDER_COLOR = "kaptcha.border.color";
    // 边框厚度，合法值：>0
    public final static String KAPTCHA_BORDER_THICKNESS = "kaptcha.border.thickness";
    // 干扰颜色，合法值： r,g,b 或者 white,black,blue.
    public final static String KAPTCHA_NOISE_COLOR = "kaptcha.noise.color";
    // 干扰实现类
    public final static String KAPTCHA_NOISE_IMPL = "kaptcha.noise.impl";
    // 图片样式：
    // 水纹com.google.code.kaptcha.impl.WaterRipple
    // 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy
    // 阴影com.google.code.kaptcha.impl.ShadowGimpy
    public final static String KAPTCHA_OBSCURIFICATOR_IMPL = "kaptcha.obscurificator.impl";
    // 背景实现类
    public final static String KAPTCHA_PRODUCER_IMPL = "kaptcha.producer.impl";
    // 文本实现类
    public final static String KAPTCHA_TEXTPRODUCER_IMPL = "kaptcha.textproducer.impl";
    // 文本集合，验证码值从此集合中获取
    public final static String KAPTCHA_TEXTPRODUCER_CHAR_STRING = "kaptcha.textproducer.char.string";
    // 验证码长度
    public final static String KAPTCHA_TEXTPRODUCER_CHAR_LENGTH = "kaptcha.textproducer.char.length";
    // 字体
    public final static String KAPTCHA_TEXTPRODUCER_FONT_NAMES = "kaptcha.textproducer.font.names";
    // 字体颜色，合法值： r,g,b  或者 white,black,blue.
    public final static String KAPTCHA_TEXTPRODUCER_FONT_COLOR = "kaptcha.textproducer.font.color";
    // 字体大小
    public final static String KAPTCHA_TEXTPRODUCER_FONT_SIZE = "kaptcha.textproducer.font.size";
    // 文字间隔
    public final static String KAPTCHA_TEXTPRODUCER_CHAR_SPACE = "kaptcha.textproducer.char.space";
    // 文字渲染器    
    public final static String KAPTCHA_WORDRENDERER_IMPL = "kaptcha.word.impl";
    // 背景实现类
    public final static String KAPTCHA_BACKGROUND_IMPL = "kaptcha.background.impl";
    // 背景颜色渐变，开始颜色
    public static final String KAPTCHA_BACKGROUND_CLR_FROM = "kaptcha.background.clear.from";
    // 背景颜色渐变，结束颜色
    public static final String KAPTCHA_BACKGROUND_CLR_TO = "kaptcha.background.clear.to";
    // 图片宽
    public static final String KAPTCHA_IMAGE_WIDTH = "kaptcha.image.width";
    // 图片高
    public static final String KAPTCHA_IMAGE_HEIGHT = "kaptcha.image.height";
}

• controller控制器

/**
 * @Author Bertram.wang
 * @Date 2019年5月12日 下午10:51:59
 * @sign KaptchaController.java
 */
@Controller
public class KaptchaController {
    @Autowired
    private DefaultKaptcha defaultKaptcha;
    @Autowired
    private RedisRepository redisRepository;
    /**
     * 验证码生成
     */
    @RequestMapping("/captcha.jpg")
    public void captcha(HttpServletResponse response) throws IOException {
        response.setHeader("Cache-Control", "no-store, no-cache");
        response.setContentType("image/jpeg");

        // 生成文字验证码
        String text = defaultKaptcha.createText();
        // 生成图片验证码
        BufferedImage image = defaultKaptcha.createImage(text);
        // 保存到shiro session
        redisRepository.set(RedisKey.kaptchaCode(text), text);

        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(image, "jpg", out);
        out.flush();
    }

}

• 登录页面Login.vue

    <template>
        <el-form :model="user" ref="loginForm" :rules="rules" class="login-container" label-position="left" label-width="0px" v-loading="loading">
            <h3 class="login_title">系统登录</h3>
            <el-form-item prop="phone">
                <el-input type="text" v-model="user.name" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="user.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="kaptcha">
                <el-input type="text" v-model="user.kaptcha" auto-complete="off" placeholder="验证码"></el-input>
            </el-form-item>
            <el-form-item style="width: 100%" class="login_remember">
                   <!--验证码-->
                <el-image :src="kaptcha" @click="refreshCode" alt="加载失败" >
                    <div slot="placeholder" class="image-slot">
                        <i class="el-icon-loading"></i>
                    </div>
                </el-image>
                <el-link class="rele_code" type="primary" @click="refreshCode">刷新</el-link>
                <el-button class="login_button" type="primary" @click="submitClick">登录</el-button>
            </el-form-item>
        </el-form>
    </template>

    <script lang="ts">
        import { Component, Prop, Vue } from 'vue-property-decorator';
        import {User} from "@/entity/User"; 
        @Component({})
        export default class Login extends Vue {
            @Prop() private msg!: string;
            public user:User = new User("","","");
            rules:object = {
                name: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                kaptcha: [{required: true, message: '请输入验证码', trigger: 'blur'}],
            }
            loading:boolean = false;

            kaptcha: string = "http://localhost/vueweb/captcha.jpg?t=" + new Date().getTime();

            refreshCode(): void {
                this.kaptcha = "http://localhost/vueweb/captcha.jpg?t=" + new Date().getTime();
            }
        }
    </script>

验证码集成使用完成。
注： mybatis-plus使用细节-菜单角色等维护。