现在有许多移动端登录是使用的是手机号码加验证码的方式登陆的,但是很多时候为了防止恶意获取短信验证码需要在前端做一些控制。
例如下列场景:
- 我们在前端写一个定时器函数,显然可以满足倒计时功能,但是页面被刷新的话,倒计时就会丢失,
- 那我们可以把倒计时的数组储存到
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>
//js
data () {
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 = false
this.countNum = LocalDelay.delay - timeLine
let 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 = false
this.countNum = 120
let 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: '发送成功!'})
})
}
}
}
看看实际效果
怎么重新打开浏览器,刷新页面都不会丢失,完美[手动滑稽]
但是要是换其他浏览器那我也冒得法了…