同学，请实现一个扫码登录

马上要到春节了，小伙伴们的公司是不是已经可以申请请假调休呢？虽然今年刚入职没有年假(好像国家不是这么规定的，但也不好跟公司硬杠)，大小周的我已经攒了7天调休，也可以提前回家过年啦！

即使是年底，打工人的工作量也没有减少，最近leader扔给我一个扫码登录的需求，我一看有点来劲了。一来做了多年前端，类似的需求还没有接触过，平时做的多的页面需求和改改bug对自身能力显然是无法提升的。二来扫码登录的功能很多应用都有做过，常见的微信扫码登录，也挺好奇具体如何实现。我大概看了一遍需求文档，写的挺详细的，流程图也标明了各端的交互流程。由于内网开发，产品流程图也忘记截图了，此处在网上找到的一个大概的流程图：

主要涉及到的是pc端、手机端和后台服务端。由于听产品同事说手机端由原生端（安卓和IOS）来实现，因此我这边只需要开发pc端就行，工作量直接减半有没有。做过该功能的小伙伴肯定了解，pc端的实现还是比较简单的，主要就是开启轮询查询后台扫码状态，然后做对应的提示或登录成功后跳转首页。

扫码登录的需求在前端主要难点在轮询上

0. 什么叫轮询？

所谓的轮询就是，由后端维护某个状态，或是一种连续多篇的数据（如分页、分段），由前端决定按序访问的方式将所有片段依次查询，直到后端给出终止状态的响应（结束状态、分页的最后一页等）。

1. 轮询的方案？

一般有两种解决方案：一种是使用websocket，可以让后端主动推送数据到前端；还有一种是前端主动轮询（上网查了下细分为长轮询和短轮询），通过大家熟悉的定时器（setInterval和setTimeout）实现。

由于项目暂未用到websocket，且长轮询需要后台配合，所以直接采用短轮询（定时器）开撸了。

遇到的问题：

1、由于看需求文档上交互流程比较清晰，最开始没去网上查找实现方案，自己直接整了一版setInterval的轮询实现。在跟后台联调的过程中发现定时器每1s请求一次接口，发现很多接口没等响应就开启下一次的请求，很多请求都还在pending中，这样是不对的，对性能是很大消耗。于是想了下，可以通过setTimeout来优化，具体就是用setTimeout递归调用方式模拟setInterval的效果，达到只有上一次请求成功后才开启下一次的请求。

// 开启轮询

    async beginPolling() {

      if (this.isStop) return;

      try {

        const status = await this.getQrCodeStatus();

        if (!status) return;

        this.codeStatus = status;

        switch(this.codeStatus) {

          case '2':

            this.stopPolling();

            // 确认登录后，需前端修改状态

            this.codeStatus = '5';

            this.loading = true;

            // 走登录逻辑

            this.$emit('login', {

              qrcId: this.qrcId,

              encryptCSIIStr: this.macAddr

            })

            break;

          case '3':

            // 取消登录

            this.stopPolling();

            await this.getQrCode();

            break;

          case '4':

            // 二维码失效

            this.stopPolling();

            break;

          default:

            break;

        }

        this.timer = setTimeout(this.beginPolling);

      } catch(err) {

        console.log(err);

        this.stopPolling();

      }

    },

2、在自测了过程中又发现了另外一个问题，stopPolling方法中clearTimeout似乎无法阻止setTimeout的执行，二维码失效后请求仍在不停发出，这就很奇怪了。上网搜索了一番，发现一篇文章(很遗憾，已经找不到是哪篇文章了！)记录了这个问题：大概意思是虽然clearTimeout已经清除了定时器，但此时有请求已经在进行中，导致再次进入了循环体，重新开启了定时器。解决办法就是，需要手动声明一个标识位isStop来阻止循环体的执行。

    stopPolling() {

      if (this.timer) {

        clearTimeout(this.timer);

        this.timer = null;

        // 标记终止轮询(仅clearTimeout无法阻止)

        this.isStop = true;

      }

    },

试了下确实达到效果了，但其实这个问题产生的具体原因我还是有些模糊的，希望遇到过相关问题的大佬能指点一下，感激不尽！

3、解决了上面提到的问题，就在以为万事大吉，只待提测的时候。后台同事发现了一个问题（点赞后台同事的尽责之心）：他在反复切换登录方式（扫码登录<->账号密码登录）的过程中，发现后台日志有一段时间打印的qrcId不是最新的。然后我这边试了下，确实在切换频率过高时，此时有未完成的请求仍在进行中，导致qrcId被重新赋值了。虽然已经在beforeDestroy里调用了stopPolling清除定时器,但此时请求是未停止的。聪明的小伙伴们肯定想到axios的cancelToken可以取消未完成的请求，但我实际也并没有用过，而且项目里也没有可以表演Ctrl+C和Ctrl+V的地方。于是百度了一番，找到一篇掘友的文章，为了表示尊敬我原封不动的搬到我的代码里了，哈哈！

import axios from "axios";

const CancelToken = axios.CancelToken;


const cancelTokenMixin = {

  data() {

    return {

      cancelToken: null, // cancelToken实例

      cancel: null, // cancel方法

    };

  },

  created() {

    this.newCancelToken();

  },

  beforeDestroy() {

    //离开页面前清空所有请求

    this.cancel("取消请求");

  },

  methods: {

    //创建新CancelToken

    newCancelToken() {

      this.cancelToken = new CancelToken((c) => {

        this.cancel = c;

      });

    },

  },

};

export default cancelTokenMixin;

掘友文章[：](在vue项目中取消axios请求（单个和全局） - 掘金 (juejin.cn))

在组件里引入mixin，另外在请求时传入cancelToken实例，确实达到效果了。此时再次切换登录方式，之前的未完成的请求已被取消，也就无法再篡改qrcId。写到此处，我发现问题2也是未完成的请求导致的，那么是否可以不用isStop标识，直接在stopPolling中调用this.cancel("取消请求");不是更好吗？

完整代码如下：

import sunev from 'sunev'; // 全局公共方法库

import cancelTokenMixin from "@/utils/cancelTokenMixin"; // axios取消请求


export default {

  props: {

    loginType: {

      type: String,

      default: 'code'

    }

  },

  mixins: [cancelTokenMixin],

  data() {

    return {

      qrcId: '', // 二维码标识

      qrcBase64: '', // 二维码base64图片

      macAddr: '', // mac地址

      loading: false,

      isStop: false,

      codeStatus: '0',

      qrStatusList: [

        {

          status: '-1',

          icon: 'error',

          color: '#ed7b2f',

          svgClass: 'icon-error-small',

          text: '二维码生成失败\n请刷新重试',

          refresh: true

        },

        { status: '0', icon: '', text: '', refresh: false },

        {

          status: '1',

          icon: 'scan',

          color: '#2986ff',

          svgClass: 'icon-scan-small',

          text: '扫描成功\n请在移动端确认',

          refresh: false

        },

        {

          status: '2',

          icon: 'confirm',

          color: '#2986ff',

          svgClass: 'icon-confirm-small',

          text: '移动端确认登录',

          refresh: false

        },

        {

          status: '3',

          icon: 'cancel',

          text: '移动端已取消',

          refresh: false

        },

        {

          status: '4',

          icon: 'error',

          color: '#ed7b2f',

          svgClass: 'icon-error-small',

          text: '二维码已失效\n请刷新重试',

          refresh: true

        },

        {

          status: '5',

          icon: 'success',

          color: '#2986ff',

          svgClass: 'icon-success-small',

          text: '登录成功',

          refresh: false

        },

        {

          status: '6',

          icon: 'error',

          color: '#ed7b2f',

          svgClass: 'icon-error-small',

          text: '登录失败\n请刷新重试',

          refresh: true

        }

      ],

      errMsg: ''

    }

  },

  async created() {

    try {

      await this.getQrCode();

      this.beginPolling();

    } catch(err) {

      console.log(err);

    }

  },

  computed: {

    // 当前状态

    curQrStatus() {

      const statusObj = this.qrStatusList.find(item => item.status === this.codeStatus);

      if (this.errMsg) {

        statusObj.text = this.errMsg;

      }

      return statusObj;

    }

  },

  methods: {

    // 开启轮询

    async beginPolling() {

      if (this.isStop) return;

      try {

        const status = await this.getQrCodeStatus();

        if (!status) return;

        this.codeStatus = status;

        switch(this.codeStatus) {

          case '2':

            this.stopPolling();

            // 确认登录后，需前端修改状态

            this.codeStatus = '5';

            this.loading = true;

            // 走登录逻辑

            this.$emit('login', {

              qrcId: this.qrcId,

              encryptCSIIStr: this.macAddr

            })

            break;

          case '3':

            // 取消登录

            this.stopPolling();

            await this.getQrCode();

            break;

          case '4':

            // 二维码失效

            this.stopPolling();

            break;

          default:

            break;

        }

        this.timer = setTimeout(this.beginPolling);

      } catch(err) {

        console.log(err);

        this.stopPolling();

      }

    },

    // 暂停轮询

    stopPolling() {

      if (this.timer) {

        clearTimeout(this.timer);

        this.timer = null;

        // 标记终止轮询(仅clearTimeout无法阻止)

        this.isStop = true;

      }

    },

    // 获取二维码base64

    async getQrCode() {

      this.reset();

      this.loading = true;

      try {

        const params = {

          encryptCSIIStr: this.macAddr

        }

        const res = await sunev.$https.post(

          'sunev/LoginQRCGen',

          { isLoading: false, cancelToken: this.cancelToken },

          params

        )

        if (res.qrcId) {

          this.qrcId = res.qrcId;

          this.qrcBase64 = res.qrcBase64;

        } else {

          this.stopPolling();

        }

      } catch(err) {

        this.errMsg = err.message;

        this.stopPolling();

      }

    },

    // 获取二维码状态

    async getQrCodeStatus() {

      try {

        const params = {

          encryptCSIIStr: this.macAddr

        }

        const res = await sunev.$https.post(

          'sunev/LoginQRCQry',

          { isLoading: false, cancelToken: this.cancelToken },

          params

        )

        return res.status;

      } catch(err) {

        this.stopPolling();

      }

    },

    // 刷新二维码

    async refresh() {

      await this.getQrCode();

      this.beginPolling();

    },

    // 切换登录类型

    toggle() {

      this.$emit('toggleLoginType');

    },

    // 重置

    reset() {

      this.isStop = false;

      this.codeStatus = '0';

      this.errMsg = '';

    },

    beforeDestroy() {

      this.stopPolling();

    }

  }

}

ps：

1、由于是老项目了，登录界面逻辑较多，避免臃肿，二维码登录拆分成单独组件实现

2、由于项目组在内网开发，以下代码都是一行行重新手打的，不是很重要的html和css部分就省略了

后记：

由于此需求并不着急上线，暂未提测，所以还不知测试同事会提出怎样的bug。另外掘友们如果发现问题，也欢迎批评指正，感激不尽！