So optimieren Sie die SMS-Verifizierung

Dieses Mal zeige ich Ihnen, wie Sie die SMS-Verifizierung optimieren und welche Vorsichtsmaßnahmen zur Optimierung der SMS-Verifizierung gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Normalerweise verwenden wir bei der Registrierung in Projekten häufig die SMS-Verifizierungsfunktion, aber jetzt treten bei vielen SMS-Verifizierungen die folgenden Probleme auf, zum Beispiel wenn die SMS-Verifizierungszeit 60 Sekunden beträgt,

1. Wenn auf die Schaltfläche geklickt wird und der Countdown noch nicht 60 Sekunden erreicht hat, aktualisieren Sie den Browser und die Bestätigungscode-Schaltfläche kann erneut angeklickt werden

2 Wenn auf die Schaltfläche geklickt wird, beginnt der Countdown beispielsweise bei 50 Sekunden. Ich habe geschlossen Nach 5 Sekunden habe ich ihn geöffnet. Zu diesem Zeitpunkt sollte der Countdown etwa 45 Sekunden betragen, aber als ich den Browser erneut öffnete, konnte die Schaltfläche erneut angeklickt werden.

Um die beiden oben genannten Probleme zu lösen, Sie müssen die Zeit in localstorage schreiben, um sie abzurufen. Ich werde meine Lösung hier veröffentlichen, da diese Methode vor ein paar Tagen verwendet wurde, also werde ich einen vue schreiben Methode hier

Der HTML-Code in der Komponente:

<p class="mtui-cell__ft" @click="getCode">
   <button class="mtui-vcode-btn mtui-text-center" v-if="flag">获取短信</button>
   <button class="mtui-vcode-btn mtui-text-center" v-if="!flag">剩余{{second}}s</button>
</p>

Hier kommt der entscheidende Punkt

Definieren Sie ein paar in den Daten benötigte Variablen:

 second: 60,
 flag: true,
 timer: null // 该变量是用来记录定时器的,防止点击的时候触发多个setInterval

Methode So erhalten Sie eine SMS-Bestätigung:

getCode() {
   let that = this;
   if (that.flag) {
    that.flag = false;
    let interval = window.setInterval(function() {
     that.setStorage(that.second);
     if (that.second-- <= 0) {
      that.second = 60;
      that.flag = true;
      window.clearInterval(interval);
     }
    }, 1000);
   }
  }

Lokalen Speicher schreiben und lesen:

　　　　　setStorage(parm) {
   localStorage.setItem("dalay", parm);
   localStorage.setItem("_time", new Date().getTime());
  },
  getStorage() {
   let localDelay = {};
   localDelay.delay = localStorage.getItem("dalay");
   localDelay.sec = localStorage.getItem("_time");
   return localDelay;
  }

Verhindern Sie, dass die Seitenaktualisierung den Bestätigungscode ungültig macht:

judgeCode() {
   let that = this;
   let localDelay = that.getStorage();
   let secTime = parseInt(
    (new Date().getTime() - localDelay.sec) / 1000
   );
   console.log(localDelay);
   if (secTime > localDelay.delay) {
    that.flag = true;
    console.log("已过期");
   } else {
    that.flag = false;
    let _delay = localDelay.delay - secTime;
    that.second = _delay;
    that.timer = setInterval(function() {
     if (_delay > 1) {
      _delay--;
      that.setStorage(_delay);
      that.second = _delay;
      that.flag = false;
     } else {
　　　　　　　　　　　　　
　　　　　　　　　　　　　　// 此处赋值时为了让浏览器打开的时候,直接就显示剩余的时间
      that.flag = true;
      window.clearInterval(that.timer);
     }
    }, 1000);
   }
  }

Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Fall in diesem Artikel Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Vuex zum Bedienen von Statusobjekten

So erstellen Sie mit Node ein persönliches Konto Roboter

Das obige ist der detaillierte Inhalt vonSo optimieren Sie die SMS-Verifizierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!