Comment optimiser la vérification par SMS

Cette fois, je vais vous montrer comment optimiser la vérification par SMS et quelles sont les précautions à prendre pour optimiser la vérification par SMS. Ce qui suit est un cas pratique, jetons-y un œil.

Habituellement, lorsque nous nous inscrivons dans des projets, nous utilisons souvent la fonction de vérification par SMS, mais maintenant de nombreuses vérifications par SMS présentent les problèmes suivants, par exemple lorsque le temps de vérification par SMS est de 60 s,

1. Lorsque vous cliquez sur le bouton et que le compte à rebours n'a pas atteint 60 s, actualisez le navigateur et vous pourrez cliquer à nouveau sur le bouton du code de vérification

2 Lorsque vous cliquez sur le bouton, le compte à rebours commence, par exemple, à 50 s, j'ai fermé. le navigateur. Après 5 secondes, je l'ai ouvert. À ce moment-là, le compte à rebours devrait être d'environ 45 secondes, mais lorsque j'ai rouvert le navigateur, il a été possible de cliquer à nouveau sur le bouton

Pour résoudre les deux problèmes ci-dessus, vous devez écrire l'heure dans localstorage. Lorsque la page est ouverte, allez sur localstorage pour l'obtenir. Je posterai ma solution ici car il y a eu un projet vue il y a quelques jours. Cette méthode est utilisée, je vais donc écrire une vue. méthode ici

Le code html dans le composant :

<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>

Le point clé est

défini dans data Plusieurs variables qui doivent être utilisées :

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

Méthode pour obtenir la vérification par SMS :

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);
   }
  }

Écrire et lire le stockage local :

　　　　　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;
  }

Empêcher l'actualisation de la page signifie que le code de vérification est invalide :

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);
   }
  }

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Comment utiliser vuex pour faire fonctionner des objets d'état

Comment utiliser Node pour créer un compte personnel robot

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!