校验验证码是否过期(定时刷新验证码)

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

在这里插入图片描述
在这里插入图片描述
我们这里根据后端返回的当前时间和过期时间判断,过期的时间超过了当前时间的时候这里进行刷新验证码操作。

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

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

utils/dayjs

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

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);
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/117852.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

TCP/IP协议群

TCP/IP协议群 什么是TCP/IP协议群 从字面意义上讲,有人可能会认为 TCP/IP 是指 TCP 和 IP 两种协议。实际生活当中有时也确实就是指这两种协议。然而在很多情况下,它只是利用 IP 进行通信时所必须用到的协议群的统称。具体来说,IP 或 ICMP、…

NVM安装与配置(管理node版本)

NVM安装与配置(管理node版本) 一、安装NVM 下载安装 NVM解压后点击exe文件进行安装:点击下一步安装到 D:\NVM 下先在D:\NVM 下创建nodejs文件夹,然后将路径设置如下:点击next 一直点击 完成安装;地方是非得失范德萨范德萨发![在…

共享WiFi贴码真实收益怎样?如何扩大盈利!

随着移动互联网的快速发展,共享WiFi贴码成为了一个备受关注的话题。这一模式的兴起引起了很多人的关注,因为它似乎为一些创业者提供了一种全新的获取收益的模式。然而,共享WiFi贴码的真实收益到底如何呢? 共享WiFi贴码的基本原理是…

【寒武纪(3)】媒体处理系统的系统控制、视频输入和后处理子系统

系统控制 文章目录 系统控制1、配置视频缓存池Video Pool2、配置硬件IP为在线工作(不通过DDR数据交互)/ 离线工作(写入DDR)模式3、硬IP可以使用 非Video Block (VB)内存4、配置是否启动内存传递的压缩 视频…

第二证券:破发的股票还能回升吗?

随着股票商场动摇的加重,许多投资者面临着他们所持有的股票破发的危险。破发是指股票当时价格低于发行价格,这通常是股票被很多出售的成果。关于那些买在高点的投资者而言,这或许是一场噩梦。但是,破发的股票还能上升吗&#xff1…

多模态情感分析——Twitter15和Twitter17数据集

一、原始数据集介绍 数据集链接: https://pan.baidu.com/s/1JLkaSerBgKe--GBaU0ZkFg?pwdfqyo提取码:fqyo 数据集介绍:原始的被划分为了训练集(60%)、验证集(20%)、测试集(20%&am…

若依笔记(四):代码生成器

已知使用MyBatisPlus代码生成器可以自动生成Entity、Mapper、Service、Controller代码,前提是数据库中有数据表,生成pojo类以及对于该数据表的增删改查命令的代码,若依更进一步能选择表后生成代码、预览、下载,同时可以生产前端代…

chrome 防止http自动转https的方法

1. 左上角,单击地址栏左边 2. 然后点击网站设置 3. 不安全内容改为【允许】 4. 然后以后访问此网站时,就不会再自动跳转为https了

基于社交网络算法的无人机航迹规划-附代码

基于社交网络算法的无人机航迹规划 文章目录 基于社交网络算法的无人机航迹规划1.社交网络搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要:本文主要介绍利用社交网络算法来优化无人机航迹规划。 …

关于笔记平台的使用感受分享

关于笔记平台的使用感受分享 前言我用过的笔记平台笔记平台简单评价巴拉巴拉WPS文档/OneNote/TowerNotion/语雀各种博客平台 个人使用率最高的平台 前言 最近也有部分同学问我平常用的笔记平台是什么,以及我比较推荐的平台是什么。这里不是广告哈,因为我…

【实战Flask API项目指南】之三 路由和视图函数

实战Flask API项目指南之 路由和视图函数 本系列文章将带你深入探索实战Flask API项目指南,通过跟随小菜的学习之旅,你将逐步掌握 Flask 在实际项目中的应用。让我们一起踏上这个精彩的学习之旅吧! 前言 当小菜踏入Flask后端开发的世界时&…

倒计时丨3天后,我们直播间见!

倒计时3天,RestCloud 零代码集成自动化平台重磅发布 ⏰11 月 9 日 14:00,期待您的参与! 点击报名:http://c.nxw.so/dfaJ9

【LeetCode周赛】LeetCode第370场周赛

目录 找到冠军 I找到冠军 II在树上执行操作以后得到的最大分数平衡子序列的最大和 找到冠军 I 一场比赛中共有 n 支队伍&#xff0c;按从 0 到 n - 1 编号。 给你一个下标从 0 开始、大小为 n * n 的二维布尔矩阵 grid 。对于满足 0 < i, j < n - 1 且 i ! j 的所有 i, …

Unit1_3:分治算法之排序问题

文章目录 一、归并排序二、快速排序思路伪代码流程图时间复杂度改进 三、堆排序结构插入提取最小值排序抽象 四、比较排序总结决策树模型 一、归并排序 归并排序子操作的思路和Unit1_2逆序计算一样 下面写一下伪代码 if left < right thencenter←L(left right)/2];Merge…

(1)(1.12) LeddarTech LeddarVu8

文章目录 前言 1 连接到自动驾驶仪 2 参数说明 前言 LeddarTech LeddarVu8 是一款长距离&#xff08;185m&#xff09;激光雷达&#xff0c;可在 16 度至 99 度视场范围内提供 8 个单独的距离&#xff0c;具体取决于所使用的型号。ArduPilot 始终使用所提供的 8 个距离中最…

C++编程案例讲解-基于结构体的控制台通讯录管理系统

基于结构体的控制台通讯录管理系统 通讯录是一个可以记录亲人、好友信息的工具&#xff0c;系统中需要实现的功能如下&#xff1a; 添加联系人&#xff1a;向通讯录中添加新人&#xff0c;信息包括&#xff08;姓名、性别、年龄、联系电话、家庭住址&#xff09;最多记录1000人…

APP开发:用途与未来前景|软件定制开发|网站小程序建设

APP开发&#xff1a;用途与未来前景|软件定制开发|网站小程序建设 APP开发已成为现代科技趋势的一部分&#xff0c;无论是日常生活还是商业领域&#xff0c;都有它的身影。通过开发APP&#xff0c;我们可以将想法、功能和内容转化为直观、易用的移动设备应用程序&#xff0c;满…

吴恩达《机器学习》6-1->6-3:分类问题、假设陈述、决策界限

一、什么是分类问题&#xff1f; 在分类问题中&#xff0c;我们试图预测的变量&#x1d466;是离散的值&#xff0c;通常表示某种类别或标签。这些类别可以是二元的&#xff0c;也可以是多元的。分类问题的示例包括&#xff1a; 判断一封电子邮件是否是垃圾邮件&#xff08;二…

如何防范AI诈骗

如何防范AI诈骗 &#x1f607;博主简介&#xff1a;我是一名正在攻读研究生学位的人工智能专业学生&#xff0c;我可以为计算机、人工智能相关本科生和研究生提供排忧解惑的服务。如果您有任何问题或困惑&#xff0c;欢迎随时来交流哦&#xff01;&#x1f604; ✨座右铭&#…

AMEYA360荣获“国际潜力之星分销商”奖!

由全球电子技术领域知名媒体集团ASPENCORE主办的“全球电子元器件分销商卓越表现奖"颁奖典礼于2023年11月3日晚在深圳大中华喜来登酒店圆满结束! 全球电子元器件分销商卓越表现奖创办于2001 年&#xff0c;迄今已成功举办20年&#xff0c;此奖项旨在表彰支持电子产业发展的…