Java使用hutool工具实现验证码登录_Java

1.先说一下流程图

2.导入工具包

<dependency>
            <groupid>cn.hutool</groupid>
            <artifactid>hutool-all</artifactid>
            <version>5.8.12</version>
        </dependency>

3.流程梳理

3.1前端模版代码

<template>
          <form @submit.prevent="handlesubmit">
            <div class="input-group">
              <div class="captcha-wrapper">
                <input
                  v-model="form.captcha"
                  type="text"
                  placeholder="请输入验证码"
                  :class="{ 'shake': formerrors.captcha }"
                  maxlength="4"
                />
                <div class="captcha-container">
                  <img 
                    :src="captchaurl" 
                    @click="refreshcaptcha"
                    class="captcha-img"
                    alt="验证码"
                    @error="handlecaptchaerror"
                  />
                  <button 
                    type="button" 
                    class="refresh-btn"
                    @click="refreshcaptcha"
                    title="刷新验证码"
                  >
                  </button>
                </div>
              </div>
              <transition name="fade">
                <p v-if="formerrors.captcha" class="error-message">{{ formerrors.captcha }}</p>
              </transition> 
</template>

3.2逻辑代码

前端挂载组件时发送请求到后端生成验证码

@restcontroller
@requestmapping("/api")
public class authcontroller {
    @getmapping("/captcha")
    public void generatecaptcha(httpservletresponse response, httpsession session) {
        // 生成验证码
        linecaptcha linecaptcha = captchautil.createlinecaptcha(100, 40);
        // 将验证码存入session
        session.setattribute("captcha", linecaptcha.getcode());

        try {
            // 输出到客户端
            response.setcontenttype("image/png");
            linecaptcha.write(response.getoutputstream());
        } catch (ioexception e) {
            e.printstacktrace();
        }
    }

<img :src="captchaurl”>动态绑定实现渲染验证码,button绑定的是这个refreshcaptcha事件，所以可以实现刷新验证码的操作

const captchaurl = ref('')
// 组件挂载时加载验证码
onmounted(() => {
  refreshcaptcha()
})
const refreshcaptcha = () => {
  // 直接使用api地址，添加时间戳防止缓存
  captchaurl.value = `${request.defaults.baseurl}/api/captcha?t=${new date().gettime()}`
  // 清空验证码输入
  form.captcha = ''
}

然后就是前段提交数据到后端做认证

const form = reactive({
  email: '',
  password: '',
  remember: false,
  captcha: ''
})
export function login(data) {
  return request({
    url: '/api/login',
    method: 'post',
    data
  })
}
 try {
    // 发送登录请求
    const res = await login({
      username: form.email,
      password: form.password,
      captcha: form.captcha,
      remember: form.remember
    })

后端接收数据进行校验

   @postmapping("/login")
    public result login(@requestbody logindto logindto, httpsession session) {
        // 获取session中的验证码
        string captcha = (string) session.getattribute("captcha");
        // 校验验证码
        if (!logindto.getcaptcha().equalsignorecase(captcha)) {
            return result.error("验证码错误");
        }
        // todo: 进行登录逻辑处理
        return null;
    }

4.前端所有代码

<template>
  <div class="login-page">
    <div class="login-container">
      <!-- left side with rocket -->
      <div class="left-side">
        <div class="logo-container">
          <h1 class="logo">七禾页话</h1>
        </div>
        
        <div class="hero-text">
          <h2>欢迎使用<br />学生管理系统</h2>
          <p>让工作更高效！</p>
        </div>

        <!-- animated rocket -->
        <div class="rocket-container">
          <div class="rocket" :class="{ 'rocket-hover': isrockethovering }">
            <div class="rocket-body">
              <div class="rocket-main"></div>
              <div class="rocket-base"></div>
              <div class="rocket-side-left"></div>
              <div class="rocket-side-right"></div>
            </div>
          </div>
          
          <!-- animated clouds -->
          <div class="clouds">
            <div v-for="i in 3" :key="i" 
                 class="cloud"
                 :class="`cloud-${i}`"
                 :style="`--delay: ${i * 2}s`">
            </div>
          </div>
        </div>
      </div>

      <!-- right side with form -->
      <div class="right-side">
        <div class="form-container">
          <h2>用户登录</h2>
          
          <form @submit.prevent="handlesubmit">
            <div class="input-group">
              <input
                v-model="form.email"
                type="email"
                placeholder="请输入用户名"
                :class="{ 'shake': formerrors.email }"
              />
              <transition name="fade">
                <p v-if="formerrors.email" class="error-message">{{ formerrors.email }}</p>
              </transition>
            </div>

            <div class="input-group">
              <input
                v-model="form.password"
                type="password"
                placeholder="请输入密码"
                :class="{ 'shake': formerrors.password }"
              />
              <transition name="fade">
                <p v-if="formerrors.password" class="error-message">{{ formerrors.password }}</p>
              </transition>
            </div>

            <div class="input-group">
              <div class="captcha-wrapper">
                <input
                  v-model="form.captcha"
                  type="text"
                  placeholder="请输入验证码"
                  :class="{ 'shake': formerrors.captcha }"
                  maxlength="4"
                />
                <div class="captcha-container">
                  <img 
                    :src="captchaurl" 
                    @click="refreshcaptcha"
                    class="captcha-img"
                    alt="验证码"
                    @error="handlecaptchaerror"
                  />
                  <button 
                    type="button" 
                    class="refresh-btn"
                    @click="refreshcaptcha"
                    title="刷新验证码"
                  >
                    <svg viewbox="0 0 24 24" class="refresh-icon">
                      <path d="m17.65 6.35a7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08a5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78l13 11h7v4l-2.35 2.35z" fill="currentcolor"/>
                    </svg>
                  </button>
                </div>
              </div>
              <transition name="fade">
                <p v-if="formerrors.captcha" class="error-message">{{ formerrors.captcha }}</p>
              </transition>
            </div>

            <div class="remember-me">
              <input
                v-model="form.remember"
                type="checkbox"
                id="remember"
              />
              <label for="remember">记住我</label>
            </div>

            <button
              type="submit"
              :class="{ 'loading': isloading }"
              :disabled="isloading"
            >
              <span v-if="!isloading">登 录</span>
              <span v-else class="loading-text">
                <svg class="spinner" viewbox="0 0 50 50">
                  <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
                </svg>
                登录中...
              </span>
            </button>
          </form>

          <div class="auth-links">
            <p class="forgot-password">
              <a href="#">忘记密码？</a>
            </p>
            <p class="register-link">
              还没有账号？ <router-link to="/register" class="text-primary">立即注册</router-link>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onmounted, onunmounted } from 'vue'
import { userouter } from 'vue-router'
import { login, getcaptcha } from '@/api/auth'
import request from '@/utils/request'

const router = userouter()
const isrockethovering = ref(true)
const isloading = ref(false)
const captchaurl = ref('')

const form = reactive({
  email: '',
  password: '',
  remember: false,
  captcha: ''
})

const formerrors = reactive({
  email: '',
  password: '',
  captcha: ''
})

// 刷新验证码
const refreshcaptcha = () => {
  // 直接使用api地址，添加时间戳防止缓存
  captchaurl.value = `${request.defaults.baseurl}/api/captcha?t=${new date().gettime()}`
  // 清空验证码输入
  form.captcha = ''
}

// 处理验证码加载错误
const handlecaptchaerror = () => {
  console.error('验证码图片加载失败')
  // 可以在这里添加重试逻辑或显示错误提示
}

// 组件挂载时加载验证码
onmounted(() => {
  refreshcaptcha()
})

const handlesubmit = async () => {
  // reset errors
  formerrors.email = ''
  formerrors.password = ''
  formerrors.captcha = ''

  // validate
  if (!form.email) {
    formerrors.email = '请输入用户名'
    return
  }
  if (!form.password) {
    formerrors.password = '请输入密码'
    return
  }
  if (!form.captcha) {
    formerrors.captcha = '请输入验证码'
    return
  }

  // show loading state
  isloading.value = true

  try {
    // 发送登录请求
    const res = await login({
      username: form.email,
      password: form.password,
      captcha: form.captcha,
      remember: form.remember
    })

    // 存储 token
    localstorage.setitem('token', res.data.token)
    
    // 登录成功，跳转到首页
    router.push('/dashboard')
  } catch (error) {
    // 根据错误类型显示不同的错误信息
    if (error.code === 400) {
      formerrors.captcha = '验证码错误'
      await refreshcaptcha()
    } else if (error.code === 401) {
      formerrors.password = '用户名或密码错误'
      await refreshcaptcha()
    } else {
      console.error('登录失败:', error)
      formerrors.password = error.message || '登录失败，请稍后重试'
      await refreshcaptcha()
    }
  } finally {
    // reset loading state
    isloading.value = false
  }
}

// start rocket hover animation
setinterval(() => {
  isrockethovering.value = !isrockethovering.value
}, 2000)
</script>

5.后端代码

package com.qiheyehua.vuespringboot2.controller;

import cn.hutool.captcha.captchautil;
import cn.hutool.captcha.linecaptcha;
import com.qiheyehua.vuespringboot2.domain.dto.logindto;
import com.qiheyehua.vuespringboot2.utils.result;
import jakarta.servlet.http.httpservletresponse;
import jakarta.servlet.http.httpsession;
import org.springframework.web.bind.annotation.*;

import java.io.ioexception;

/**
 * @author 七禾页话
 * @date 2024/12/16 18:57
 **/
@restcontroller
@requestmapping("/api")
public class authcontroller {
    @getmapping("/captcha")
    public void generatecaptcha(httpservletresponse response, httpsession session) {
        // 生成验证码
        linecaptcha linecaptcha = captchautil.createlinecaptcha(100, 40);
        // 将验证码存入session
        session.setattribute("captcha", linecaptcha.getcode());

        try {
            // 输出到客户端
            response.setcontenttype("image/png");
            linecaptcha.write(response.getoutputstream());
        } catch (ioexception e) {
            e.printstacktrace();
        }
    }
    @postmapping("/login")
    public result login(@requestbody logindto logindto, httpsession session) {
        // 获取session中的验证码
        string captcha = (string) session.getattribute("captcha");
        // 校验验证码
        if (!logindto.getcaptcha().equalsignorecase(captcha)) {
            return result.error("验证码错误");
        }
        // todo: 进行登录逻辑处理
        return null;
    }
}

到此这篇关于java使用hutool工具实现验证码登录的文章就介绍到这了,更多相关java hutool验证码登录内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！