vue获取手机验证码倒计时

现在有许多移动端登录是使用的是手机号码加验证码的方式登陆的,但是很多时候为了防止恶意获取短信验证码需要在前端做一些控制。

例如下列场景:

我们在前端写一个定时器函数,显然可以满足倒计时功能,但是页面被刷新的话,倒计时就会丢失,
那我们可以把倒计时的数组储存到cookie或者session中,可以满足页面刷新不丢失的效果,但是用户关闭掉页面,还是会存在倒计时丢失.
最后我们需要把倒计时时间记录在localStorage中,记录当前储存时间和和剩余倒计时秒数,然后在重新打开页面的时候根据当前时间减去存储时间,要是大于剩余倒计时时间那么我们倒计时继续

最后贴上具体代码：

//html
<div class="ver-code-btn btn bg-gray white" @click="getVerifyCode"><span v-if="countFlag">获取验证码</span><span v-else>剩余{{countNum}}S</span>
</div>
//jsdata () {return {countNum: 120, // 倒计时秒数countFlag: true}},created () {this.monitor() },methods: {monitor () {//监听关闭页面之后重新打开是否改继续倒计时let LocalDelay = this.getLocalDelay()let timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000)if (timeLine > LocalDelay.delay) {console.warn('倒计时过期')} else {this.countFlag = falsethis.countNum = LocalDelay.delay - timeLinelet timer = setInterval(() => {if (this.countNum > 1) {this.countNum--this.setLocalDelay(this.countNum)  //设置每一次还需倒计时} else {clearInterval(timer)this.countFlag = true}}, 1000)}},countDown () {if (this.countFlag) {this.countFlag = falsethis.countNum = 120let timer = setInterval(() => {if (this.countNum > 1) {this.countNum--this.setLocalDelay(this.countNum)} else {clearInterval(timer)this.countFlag = true}}, 1000)} else {return false}},setLocalDelay (delay) {// location.href作为页面的唯一标识，可能一个项目中会有多个验证码。localStorage.setItem('delay_' + location.href, delay)localStorage.setItem('time_' + location.href, new Date().getTime())},getLocalDelay () {let LocalDelay = {delay: localStorage.getItem('delay_' + location.href),time : localStorage.getItem('time_' + location.href)}return LocalDelay},getVerifyCode () {if (this.countFlag) {api({phone}).then(res => {this.countDown() // 倒计时函数Toast({message: '发送成功!'})})}}
}

看看实际效果

怎么重新打开浏览器,刷新页面都不会丢失,完美[手动滑稽]
但是要是换其他浏览器那我也冒得法了…

vue获取手机验证码倒计时相关推荐

vue获取手机验证码60秒倒计时，不能点击按钮
vue获取手机验证码60秒倒计时,不能点击按钮 export const resend = element => {console.log(element)var num = 60var tim ...
获取手机验证码倒计时功能
倒计时: 例如:登录页面获取手机验证码登录代码: /* text:'获取验证码' => 按钮的初始展示样式是获取验证码 disabled:false, => 是否禁用按钮防止用户在短时 ...
Vue - 实现获取手机验证码倒计时 60 秒（手机号+验证码登录功能）
前言网上的大部分获取验证码逻辑的例子,代码多还不健壮,本文将用最少的代码实现相同的功能. 当点击获取验证码按钮时,会自动进入倒计时,同时按钮无法点击, 您可以自定义倒计时时间,如下图所示: 这块由于 ...
如何封装一个vue组件（获取手机验证码的组件）
如何封装一个vue组件(获取手机验证码的组件) 定义一个名为 item-time 的新组件,这是获取手机验证码的组件 Vue.component('item-time', {props: ['maxt ...
android获取手机验证码界面以及倒计时实现demo，移动端应用开发试题
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', ...
2022.9.17 vue、element-ui实现登录获取手机验证码，进行手机号校验、验证码CD60秒
一.实现效果: 1.直接点击,不为空校验 2.输入手机号格式不正确时 3.获取完验证码进行读秒二.页面html <el-formclass="phone-form"ref= ...
springboot+vue实现手机验证码功能
springboot+vue实现手机验证码功能榛子云短信平台用户中心注册登录(有免费的一条消息,剩下的需要买)(阿里云个人得备案) 在springboot中加入依赖,用到了redis,阿里的fast ...
【JavaScript】手机验证码倒计时
手机验证码倒计时样式点击"发送手机验证码"开启倒计时: 开启倒计时后,再次点击不会发起再次请求: index.vue <p class="title" ...
获取手机验证码按钮的效果实现
在web网页中,用户的一些行为,例如注册,登录,付款,修改密码等,都需要网站通过手机验证码来确认其行为身份,从而保证用户账户和网站自身的安全. 一.简介网页中的验证码一般都是采用点击获取的方式,在实 ...

vue获取手机验证码倒计时

vue获取手机验证码倒计时相关推荐

最新文章

热门文章