登录验证码
登录验证是一般系统都会有的功能，验证的方式也多种多样，比如输入式验证码，拖动式验证条，拖动式验证拼图等等。
我们这里先实现常规的输入验证码的方式，右边显示验证码图片，点击可刷新，左边输入验证码。如下图为实现的效果。
实现案例
验证码的实现需要前后端协同，脱离彼此则不可用，故将前后端的实现放在一起，不再另写前端教程。
后端
1.添加依赖
打开 kitty-admin 工程，添加maven依赖。
pom.xml
<!-- kaptcha -->
<dependency><groupId>com.github.axet</groupId><artifactId>kaptcha</artifactId><version>0.0.9</version>
</dependency>2.添加配置
添加验证码配置类 KaptchaConfig，配置验证码的一些样式。
KaptchaConfig.java
package com.louis.kitty.admin.config;import java.util.Properties;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;//验证码配置一般都是在web.xml中配置 springboot中 将 xml 的形势转化成代码实现
/*** 验证码配置* @author Louis* @date Oct 29, 2018*/
@Configuration
public class KaptchaConfig {@Beanpublic DefaultKaptcha producer() {Properties properties = new Properties();properties.put("kaptcha.border", "no");properties.put("kaptcha.textproducer.font.color", "black");properties.put("kaptcha.textproducer.char.space", "5");Config config = new Config(properties);DefaultKaptcha defaultKaptcha = new DefaultKaptcha();defaultKaptcha.setConfig(config);return defaultKaptcha;}
}验证码的一些参数配置
3.添加验证码获取接口
添加验证码获取接口，并将生成的验证码保存起来，在登录的时候用来跟前台输入验证码进行匹配。
SysLoginController.java
import com.google.code.kaptcha.Producer;
//其他引用自动注入就好 我的编辑器Producer无法自动引用@Autowiredprivate Producer producer;@Autowiredprivate StringRedisTemplate redisTemplate;@GetMapping("captcha.jpg")public void captcha(HttpServletResponse response) throws ServletException, IOException {response.setHeader("Cache-Control", "no-store, no-cache");response.setContentType("image/jpeg");// 生成文字验证码String text = producer.createText();// 生成图片验证码BufferedImage image = producer.createImage(text);// 保存到验证码到 session （有问题 改为下方）//ShiroUtils.setSessionAttribute(Constants.KAPTCHA_SESSION_KEY, text);//原博客验证码保存到session的代码，会有一些问题。首先由于多人共用一个key值，多人使用验证码时会冲突；如果改用后面redis逻辑保存的话，session生效时间会彼此影响。此处修改为使用redis保存。每生成一个验证码，放入redis中，redis时效设置为两分钟。登陆验证时，如果该验证码存在于redis中，则验证通过，并删除该验证码redisTemplate.opsForValue().set(text,text,120, TimeUnit.SECONDS);ServletOutputStream out = response.getOutputStream();ImageIO.write(image, "jpg", out); IOUtils.closeQuietly(out);}4.登录接口增加验证码验证
登录接口增加验证码验证，将之前保存的验证码跟前台输入验证码进行匹配。
SysLoginController.java
/*** 登录接口*/@PostMapping(value = "/login")public HttpResult login(@RequestBody LoginBean loginBean) throws IOException {String userName = loginBean.getAccount();String password = loginBean.getPassword();String captcha = loginBean.getCaptcha();// 从session中获取之前保存的验证码跟前台传来的验证码进行匹配
// Object kaptcha = ShiroUtils.getSessionAttribute(Constants.KAPTCHA_SESSION_KEY);
// if(kaptcha == null){
// return HttpResult.error("验证码已失效");
// }
// if(!captcha.equals(kaptcha)){
// return HttpResult.error("验证码不正确");
// }//改用redis读取判断Object kaptcha = redisTemplate.opsForValue().get(captcha);if(kaptcha == null){return ResponseUtil.error("验证码不正确！", "");}else{redisTemplate.delete(captcha);}// 用户信息SysUser user = sysUserService.findByName(userName);// 账号不存在、密码错误if (user == null) {return HttpResult.error("账号不存在");}if (!match(user, password)) {return HttpResult.error("密码不正确");}// 账号锁定if (user.getStatus() == 0) {return HttpResult.error("账号已被锁定,请联系管理员");}// 生成token，并保存到数据库SysUserToken data = sysUserTokenService.createToken(user.getId());return HttpResult.ok(data);}到这里后台代码就完成了。
启动程序，访问 http://localhost:8001/captcha.jpg，如果结果如下就没问题了。
前端
1.添加组件
打开登录页面，在密码栏下面增加一行验证码。
<el-form-item ><el-col :span="12"><el-form-item prop="captcha"><el-input type="test" v-model="loginForm.captcha" auto-complete="off" placeholder="验证码, 单击图片刷新"style="width: 100%;"></el-input></el-form-item></el-col><el-col class="line" :span="1"> </el-col><el-col :span="11"><el-form-item><img style="width: 100%;" class="pointer" :src="loginForm.src" @click="refreshCaptcha"></el-form-item></el-col>
</el-form-item>2.添加组件
添加验证码相关的属性，captcha是验证码值，src是验证码图片路径。
Login.vue
3.验证规则
添加验证码验证规则。
Login.vue
4.传入验证码
在登录接口调用的时候，一并传入验证码。
Login.vue
let userInfo = {account:this.loginForm.account, password:this.loginForm.password, captcha:this.loginForm.captcha}5.刷新验证码
添加refreshCaptcha方法，增加刷新验证码的逻辑。
Login.vue
refreshCaptcha: function(){this.loginForm.src = this.global.baseUrl + "/captcha.jpg?t=" + new Date().getTime();}
原文链接 https://www.cnblogs.com/7788IT/p/10667200.html
参考文章https://blog.csdn.net/weidong_y/article/details/81005658，https://cloud.tencent.com/developer/article/1406265
