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

最新推荐文章于 2024-07-07 03:51:54 发布

SwJieJie

最新推荐文章于 2024-07-07 03:51:54 发布

阅读量588

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_44552416/article/details/134207200

版权

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

在这里插入图片描述

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

我们这里使用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);
});