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

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

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

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

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

utils/dayjs

import 'dayjs/locale/zh-cn'
import dayjs from 'dayjs'
dayjs.locale('zh-cn') 
export default dayjs
1
2
3
4

login.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);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29