SMS 확인을 최적화하는 방법

이번에는 SMS 확인을 최적화하는 방법과 SMS 확인을 최적화하기 위한 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 살펴보겠습니다.

보통 프로젝트에 등록할 때 SMS 인증 기능을 자주 사용하는데, 현재 많은 SMS 인증에서 다음과 같은 문제가 발생합니다. 예를 들어 SMS 인증 시간이 60초인 경우,

1. 카운트다운이 60초에 도달하지 않았으면 브라우저를 새로고침하면 인증코드 버튼을 다시 클릭할 수 있습니다

2. 버튼을 클릭했을 때 카운트다운이 시작되면 예를 들어 50초에 브라우저를 닫고 5초 후에 지금 열려고 하는데 이때 시간 카운트다운이 45초 정도 되어야 하는데 브라우저를 다시 열면 버튼을 다시 클릭할 수 있습니다

위의 두 가지 문제를 해결하려면 localstorage에 시간을 기록해야 합니다. , 페이지가 열리면 localstorage로 이동하여 가져옵니다. 며칠 전에 이 방법을 사용한 vue 프로젝트가 있었기 때문에 여기에

HTML 코드를 작성하겠습니다. 구성 요소:

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

핵심 사항은 다음과 같습니다

데이터에 사용해야 하는 여러 변수 정의:

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

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

로컬 저장소 쓰기 및 읽기:

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

페이지 새로 고침 방지 인증 코드 무효화:

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vuex를 사용하여 상태 객체를 조작하는 방법

노드를 사용하여 개인 계정 로봇을 만드는 방법

위 내용은 SMS 확인을 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!