当前位置：首页 > news >正文

校验验证码是否过期（定时刷新验证码）

news 2025/6/30 16:33:22

需求：
我们在登录的时候会遇到通过接口请求验证码的操作，这里的验证码会有过期的时间，当我们验证码过期了，我们要进行重新刷新验证码。

在这里插入图片描述

我们这里根据后端返回的当前时间和过期时间判断，过期的时间超过了当前时间的时候这里进行刷新验证码操作。

我们这里使用dayjs控件进行时间转换。day.js

具体实现逻辑如下：
vue3使用

utils/dayjs

import 'dayjs/locale/zh-cn'
import dayjs from 'dayjs'
dayjs.locale('zh-cn') 
export default dayjs

import Dayjs from '/@/utils/dayjs';
// 获取验证码
const getCaptcha = async () => {state.ruleForm.code = '';var res = await getAdminAPI(SysAuthApi).apiSysAuthCaptchaGet();state.captchaImage = 'data:text/html;base64,' + res.data.result?.img;captchaImageExpire = res.data.result?.expired;requestTime = res.data.time;state.ruleForm.codeId = res.data.result?.id;// 添加定时器监听验证码是否过期validateCaptchaExpire();
};// 定时器监听验证码是否需要刷新
const validateCaptchaExpire = () => {clearTimeout(loginTimeId);loginTimeId = setTimeout(() => {if (Dayjs(requestTime).add(6, 'second').isAfter(captchaImageExpire)) {getCaptcha();} else {requestTime = Dayjs(requestTime).add(1, 'second');validateCaptchaExpire();}}, 1000);
};
//在卸载之前清除验证码操作
onBeforeUnmount(() => {clearTimeout(loginTimeId);
});