手机短信验证码计时后转变app后在切回来并未更新计时的情况

原创
小哥 3年前 (2022-11-16) 阅读数 10 #大杂烩

使用的是vue框架,编写了发送验证码的功能,后来发现如果剩余的验证码被发送40s, 剪切并将页面改回40s,这太离谱了,然后我将使用缓存进行处理。

我用注释标记了关键部分的代码。

    // 发送验证码
    async sendCode(newKeyCode = undefined) {
      if (!this.isSendCodeActive) {
        return;
      }
      this.sendCodeLoaing = true;
      if (!this.globalProcessData.getPublicKey() && !newKeyCode) {
        // 没有publicKeyCode,重新获取
        this.rsaFailure();
        return;
      }

      const params = {
        data: {
          mobile: this.codeForm.phoneNum,
        },
      };
      // 将data数据被加密和封装request再次请求接口
      const request = this.$loginUtils.handleEncryptionRequest(
        params,
        // 如果公钥不存在,则使用刷新的公钥。
        newKeyCode || this.globalProcessData.getPublicKey()
      );
      const response = await sendAuthCode(request).catch(() => {});
      if (response.code !== 0) {
        this.$message({
          message: response.msg,
          type: error,
        });
        this.sendCodeLoaing = false;
        return;
      }
      if (this.timeObj.codeCount) {
        clearTimeout(this.timeObj.codeCount);
      }
      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
      window.sessionStorage.setItem(
        time_ + location.href,
        new Date().getTime()
      );
      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
      this.countDownFn(this.countDownNum);
      // this.countDownNum--;
    },
    // 倒计时
    countDownFn(time) {
      this.countDownNum = time;
      if (time === 0) {
        this.sendMsg = 重新发送;
        this.countDownNum = COUNT_DOWN_NUMBER;
        this.sendCodeLoaing = false;
        return;
      }
      this.countDownNum--;
      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
      // 当前时间
      const nowTime = new Date().getTime();
      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
      // 上次缓存时间
      const lastTime = window.sessionStorage.getItem(time_ + location.href);
      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
      // 两个时间差
      const diff = nowTime - lastTime / 1000;
      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
      // 如果本地缓存具有读取秒数,则使用本地缓存的读取秒数。
      if (diff < 60) {
        this.countDownNum = 60 - diff;
      }
      this.sendMsg = 剩余${this.countDownNum}秒;
      this.timeObj.codeCount = setTimeout(() => {
        this.countDownFn(this.countDownNum);
      }, 1000);
    },
版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除