How to realize SMS verification optimization

What I bring to you this time is how to optimize SMS verification and what matters need attention to realize SMS verification optimization. The following is an actual case, let's take a look.

Usually, we often use the SMS verification function when registering the project, but now many SMS verification problems exist, such as when the SMS verification time is 60s,

1. Click the button. When the countdown has not reached 60s, refresh the browser and click the verification code button again.

2. When you click the button, the countdown begins. For example, I closed my browser in the 50s and reopened it after 5s. At this time, the countdown time should be about 45s, but when you reopen the browser, you can click the button again.

In order to solve the above two problems, you need to write all the time into localstorage. When you open the page, go to localstorage to get it. I post my solution here, because a vue project used this method a few days ago, so I write a vue method here.

Html code in the component:

& ltp class = " mtui-cell _ _ ft " @ click = " getCode " & gt；

& ltbuttonclass = "mtui-vcode-btnmtui-text-center" v-if = "flag" > get a short message.

& ltbutton class = " mtui-vcode-BTN mtui-text-center " v-if = "！ Flag "> {{seconds}} seconds left.

& lt/p & gt； Here comes the point.

Define several variables to be used in the data:

Second: 60,

Flag: really,

Timer: null // This variable is used to record the timer to prevent multiple setInterval from being triggered when clicked, and to obtain the method of SMS verification:

getCode() {

Let that = this;

If (that. flag) {

that.flag = false

let interval = window . setinterval(function(){

that . set storage(that . second)；

If (then. Second-<; = 0) {

that.second = 60

that.flag = true

Window.clearInterval (interval);

}

}, 1000);

}

} read and write local storage:

SetStorage (parameter)

localStorage.setItem("dalay "，parm)；

LocalStorage.setItem("_time ",new date (). getTime())；

},

getStorage() {

Let localdelay = {};

local delay . delay = local storage . getitem(" dalay ")；

local delay . sec = local storage . getitem(" _ time ")；

Return to local delay;

} Preventing page refresh is an invalid verification code:

judgeCode() {

Let that = this;

let local delay = that . get storage()；

Let secTime = parseInt (

(New date (). getTime()-local delay . sec)/ 1000

);

console . log(local delay)；

if(secTime & gt； localDelay.delay) {

that.flag = true

Console.log ("expired");

} Otherwise {

that.flag = false

let _ delay = local delay . delay-sec time；

that.second = _ delay

that . timer = setInterval(function(){

if(_ delay & gt； 1) {

_ delay-；

that . set storage(_ delay)；

that.second = _ delay

that.flag = false

} Otherwise {

//The assignment here is to directly display the remaining time when opening the browser.

that.flag = true

window . clear interval(that . timer)；

}

}, 1000);

}

I believe that after reading this case, you have mastered the method. For more exciting, please pay attention to other related articles on Gxl!

Recommended reading:

How to use vuex to manipulate status objects

How to make a personal robot with nodes