vue+springboot如何代码实现验证码登录

验证码登录通常包含以下步骤：

1. 在前端页面上展示验证码图片，并在提交表单时将验证码值一并提交到后端。

2. 后端接收到验证码值后，通过比较用户提交的验证码值和生成的验证码值是否一致来判断验证码是否正确。

3. 如果验证码正确，则继续进行登录操作；否则返回错误提示信息。

下面是一个使用Vue和Spring Boot实现验证码登录的示例代码：

前端页面（使用Element UI库）：

<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>

后端代码：

@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`是一个自定义的返回结果类，用于返回登录结果和错误信息。