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


我们这里根据后端返回的当前时间和过期时间判断,过期的时间超过了当前时间的时候这里进行刷新验证码操作。
我们这里使用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);
});
相关文章:
校验验证码是否过期(定时刷新验证码)
需求: 我们在登录的时候会遇到通过接口请求验证码的操作,这里的验证码会有过期的时间,当我们验证码过期了,我们要进行重新刷新验证码。 我们这里根据后端返回的当前时间和过期时间判断,过期的时间超过了当前时间的时候…...
windows idea本地执行spark sql避坑
本地安装了IDEA,并配置好了相关POM,可以在本机使用sparkSession连接数据,并在数据库执行sql,在idea展示执行结果。 但是,如果将数据的查询结果建立到spark中,再展示,就会报错 Error while run…...
在一个循环链队中只有尾指针(记为rear,结点结构为数据域data,指针域next),请给出这种队列的入队和出队操作实现过程
在一个循环链队中只有尾指针(记为rear,结点结构为数据域data,指针域next),请给出这种队列的入队和出队操作实现过程 入队过程如下图: 先创一个结点,用于存储要插入的结点数据 然后就是老套路了…...
智能客服系统应用什么技术?
随着科技的飞速发展,智能客服系统逐渐出现在我们的生活中。这些系统不仅能够提供即时的客户服务,还可以通过人工智能等技术实现更加高效和准确的服务。那么,智能客服系统究竟应用了哪些技术呢?本文将详细解析。 1、机器学习技术 …...
亚马逊、美客多卖家测评:如何建立养号团队实现运营化式测评?
大家好,我是跨境电商测评养号7年从事经验的珑哥。养号环境软件开发,深度解决各跨境平台矩阵养号防关联、砍单、F号问题。关注珑哥解决更多跨境养号测评问题。 测评,相信这个词对于大部分跨境卖家来说,想必都不陌生,因…...
苹果IOS系统webglcontextlost问题-解决方案
问题描述 在IOS手机 解码视频流的时候,第一次可以正常播放,但只要IOS手机熄屏,再重新唤醒,就会一直播放失败,无论换哪个浏览器都不行。安卓手机则一切正常。 经过排查,发现 IOS手机 的浏览器会无故 webGL…...
供应链ERP之合同:创建、修订与模板
本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…...
MySQL第二讲·表的创建与修改
你好,我是安然无虞。 文章目录 表:怎么创建和修改数据表?1. 如何创建数据表?2. 都有哪些约束?3. 如何修改表?添加字段修改字段 表:怎么创建和修改数据表? 创建和修改数据表&#x…...
springboot的循环依赖问题描述及解决方案
一.了解循环依赖的场景 在Spring Boot中,循环依赖是指两个或多个Bean之间相互依赖,导致它们无法正确地创建和注入。循环依赖可能会导致应用程序无法启动或出现其他异常。 在以下情况下,您可能需要显式设置循环依赖: 两个Bean相…...
当科技遇上神器:用Streamlit定制AI可视化问答界面
Streamlit是一个开源的Python库,利用Streamlit可以快速构建机器学习应用的用户界面。 本文主要探讨如何使用Streamlit构建大模型外部知识检索的AI问答可视化界面。 我们先构建了外部知识检索接口,然后让大模型根据检索返回的结果作为上下文来回答问题。…...
毛泽东思想和中国特色社会主义理论概论平时作业四
毛泽东思想和中国特色社会主义理论概论平时作业四 1.单选题 1.1人民代表大会制度是中国人民当家作主的基本政治制度,是我国的国体。(b) a.正确 b.错误 人民代表大会制度是中国人民当家作主的根本政治制度,是我国的政体。1.2我国的政体是人民民主专政。…...
微信怎么设置自动通过好友申请?
当开展引流获客活动时,员工会在一段时间内频繁收到好友添加的申请,手动同意好友请求费时费力还容易出现漏加的情况,那么微信能自动通过好友请求吗? 如何设置快速自动通过好友申请呢? 当微信号在系统登录,…...
亲测解决Pytorch TypeError: object of type ‘numpy.int64‘ has no len()
这个问题是小虎在初始化自适应平均池化的时候遇到的,解决方法是限制初始化时池化大小的类型。 问题原文 Exception has occurred: TypeError object of type numpy.int64 has no len()File "D:\Complier\LEF\lib\model\segmentation\heads\modules\fgModules…...
前端模拟实现可编辑的表格table插件
在做项目中遇到了一个供货记录的功能,要求用户自己编辑添加删除表格数据,接下来我们就模拟下前端如何实现该功能 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta http-equiv"X-…...
PerfectPixel 插件,前端页面显示优化工具
1.简介 PerfectPixel 插件是一款适用于 Chrome 浏览器的网页前端页面显示优化工具,该插件能够帮助开发人员和标记设计人员在开发时将设计图直接加载至网页中,与已成型的网页进行重叠对比,以规范网页像素精度 作为一款可以优化前端页面显示的…...
mysql迁移data目录(Linux-Centos)
随着时间的推移,mysql的数据量越越大,使用yum默认安装的目录为系统盘 /var/lib/mysql,现重新挂载了一个硬盘,需要做数据目录的迁移到 /mnt/data/。以解决占用系统盘过高情况。 1.强烈建议这种操作。镜像一个一样的Centos系统&…...
linux-等保测评
#查看审计规则 #auditctl -l #添加审计规则 #auditctl -w /etc/passwd -p rwxa(注意:用 auditd 添加审计规则是临时的,立即生效,但是系统重启失效。) #-w path : 指定要监控的路径,上面的命令指定了监控的文…...
一、React基础知识
一、环境安装 第一种:使用原生搭建(可以从国内下载配置镜像、也可以从国外下载) 指令:1.国内下载:(1:npm config set registry https://r.npm.taobao.org// (2:npm install -g create-react-app…...
RocketMQ入门示例-生产者
大家好,本文主要是按照官网的教程把消费者和生产者的示例写下来,开箱即用。 RocketMQ安装 安装请参考官方安装教程: 快速开始 | RocketMQhttps://rocketmq.apache.org/zh/docs/quickStart/01quickstart 本人安装的是最新版本5.x,…...
2023面试知识点三
1、强软弱虚引用 强引用 当内存不足的时候,JVM开始垃圾回收,对于强引用的对象,就算是出现了OOM也不会对该对象进行回收,打死也不回收~! 强引用是我们最常见的普通对象引用,只要还有一个强引用指向一个对象…...
Phi-4-mini-reasoning企业级落地:金融风控规则推理引擎构建案例
Phi-4-mini-reasoning企业级落地:金融风控规则推理引擎构建案例 1. 项目背景与模型介绍 在金融风控领域,规则推理引擎是核心决策系统的重要组成部分。传统规则引擎往往面临维护成本高、灵活性差、难以应对复杂场景等问题。Phi-4-mini-reasoning作为一款…...
何时DCDC预降压+LDO二次线性稳压?
LDO 核心选型分界结论及优化要点核心选型分界结论以LDO输入输出压差ΔV为核心判断指标,结合输出功率、场景约束,通用选型规则如下:通用强制分界点:当ΔV≥2V,且输出功率≥100mW(对应你之前的5V转3V70mA工况…...
trae中安装mcp报Cannot find package/ERR_MODULE_NOT_FOUND问题
简介 我在trae中安装高德地图的mcp和其他的mcp报出了以下错误,以此记录并分享给大家。 新的改变 node:internal/modules/esm/resolve:204 const resolvedOption FSLegacyMainResolve(pkgPath, packageConfig.main, baseStringified); ^ Error: Cannot find pack…...
Chandra AI在教育领域的应用:智能学习助手开发
Chandra AI在教育领域的应用:智能学习助手开发 1. 引言 想象一下这样的场景:一个学生在深夜复习功课,遇到一道数学难题却找不到老师请教;一个上班族想学习新技能,但时间碎片化难以系统学习;一个老师面对几…...
Rust Web开发:ActixWeb实战指南
1. 为什么选择ActixWeb进行Rust Web开发 我第一次接触ActixWeb是在三年前的一个电商项目里,当时团队需要处理每秒上万次的库存查询请求。测试了多个Rust框架后,ActixWeb凭借其卓越的性能表现脱颖而出——在同等硬件条件下,它的QPS(…...
Spring Boot 3.0 + Java 17 微服务实战:用Gradle统一管理多模块依赖与版本,告别配置混乱
Spring Boot 3.0 Java 17 微服务实战:用Gradle统一管理多模块依赖与版本 在微服务架构中,依赖管理往往成为开发者的噩梦。想象一下,当你需要在十几个子模块中同步更新Spring Boot版本时,传统的做法是在每个模块的构建文件中逐一修…...
Qwen3-ASR-0.6B作品集:Qwen3-ForcedAligner-0.6B时间戳精度图谱
Qwen3-ASR-0.6B作品集:Qwen3-ForcedAligner-0.6B时间戳精度图谱 你有没有想过,一段语音里的每个字、每个词,甚至每个音节,是在哪个精确的时间点被说出来的?这听起来像是电影后期制作里的黑科技,但现在&…...
树莓派4B上跑YOLOv8n-NCNN,实测2FPS?别急,这有份从模型转换到C++代码的完整调优指南
树莓派4B上跑YOLOv8n-NCNN性能调优实战:从2FPS到流畅推理的完整指南 当你在树莓派4B上成功部署YOLOv8n-NCNN后,发现推理速度只有可怜的2FPS时,是否感到沮丧?别担心,这不是硬件性能的终点。本文将带你深入分析性能瓶颈&…...
AI爱好者成长手册:从“会用”到“用好”主流大模型的进阶之路
许多AI爱好者在使用大模型一段时间后会陷入一个困惑:为什么别人能用AI写出惊艳的文案、完成复杂的分析,而自己却总是得到平庸的结果?答案往往不在于模型的选择,而在于使用方式。经过在RskAi(www.rsk.cn) 平…...
002MCP
MCP...
