验证码登录通常包含以下步骤：
1. 在前端页面上展示
验证码图片，并在提交表单时将
验证码值一并提交到
后端。
2.
后端接收到
验证码值后，通过比较用户提交的
验证码值和生成的
验证码值是否一致来判断
验证码是否正确。
3. 如果
验证码正确，则继续进行
登录操作；否则返回错误提示信息。
下面是一个使用
Vue和
Spring Boot实现验证码登录的示例代码：
前端页面（使用Element UI库）：
```html
<template>
<el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="100px">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="
验证码" prop="verifyCode">
<el-input v-model="loginForm.verifyCode" placeholder="请输入
验证码"></el-input>
<img :src="verifyCodeUrl" @click="refreshVerifyCode" style="cursor: pointer;">
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">
登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { login } from '@/api/user'
export default {
data() {
return {
loginForm: {
username: '',
password: '',
verifyCode: ''
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
verifyCode: [{ required: true, message: '请输入
验证码', trigger: 'blur' }]
},
verifyCodeUrl: '/api/verifyCode?timestamp=' + new Date().getTime()
}
},
methods: {
refreshVerifyCode() {
this.verifyCodeUrl = '/api/verifyCode?timestamp=' + new Date().getTime()
},
login() {
this.$refs.loginForm.validate(valid => {
if (valid) {
login(this.loginForm).then(res => {
//
登录成功后的操作
}).catch(error => {
//
登录失败后的操作
})
}
})
}
}
}
</script>
```
后端代码：
```java
@RestController
public class LoginController {
@Autowired
private RedisTemplate<String, String> redisTemplate;
@GetMapping("/api/verifyCode")
public void verifyCode(HttpServletRequest request, HttpServletResponse response) throws Exception {
// 生成
验证码
String verifyCode = VerifyCodeUtils.generateVerifyCode(4);
// 将
验证码存入Redis中，有效期为5分钟
String key = "verifyCode_" + request.getSession().getId();
redisTemplate.opsForValue().set(key, verifyCode, 5, TimeUnit.MINUTES);
// 将
验证码图片写入响应流中
response.setContentType("image/jpeg");
ServletOutputStream out = response.getOutputStream();
VerifyCodeUtils.outputImage(100, 40, out, verifyCode);
}
@PostMapping("/api/login")
public Result login(@RequestBody LoginForm form, HttpServletRequest request) {
//
校验验证码
String key = "verifyCode_" + request.getSession().getId();
String verifyCode = redisTemplate.opsForValue().get(key);
if (StringUtils.isBlank(verifyCode)) {
return Result.error("
验证码已过期，请重新获取");
}
if (!verifyCode.equalsIgnoreCase(form.getVerifyCode())) {
return Result.error("
验证码不正确");
}
//
校验用户名和密码
// ...
return Result.ok();
}
}
```
其中，`VerifyCodeUtils`是一个工具类，用于生成
验证码图片。`LoginForm`是一个表单类，用于接收前端传递的用户名、密码和
验证码值。`Result`是一个自定义的返回结果类，用于返回
登录结果和错误信息。
717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
