北京网站建设培训学校,单页面网站设计,搭建一个商城类网站,建设摩托车网站需求#xff1a; 我们在登录的时候会遇到通过接口请求验证码的操作#xff0c;这里的验证码会有过期的时间#xff0c;当我们验证码过期了#xff0c;我们要进行重新刷新验证码。 我们这里根据后端返回的当前时间和过期时间判断#xff0c;过期的时间超过了当前时间的时候…需求 我们在登录的时候会遇到通过接口请求验证码的操作这里的验证码会有过期的时间当我们验证码过期了我们要进行重新刷新验证码。 我们这里根据后端返回的当前时间和过期时间判断过期的时间超过了当前时间的时候这里进行刷新验证码操作。
我们这里使用dayjs控件进行时间转换。day.js
具体实现逻辑如下 vue3使用
utils/dayjs
import dayjs/locale/zh-cn
import dayjs from dayjs
dayjs.locale(zh-cn)
export default dayjslogin.vue
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);
});
