二维码扫码登录

总体思路：

sequenceDiagram
PC->>后端: 获取二维码ID
后端-->>PC: ID
PC->>移动端: 扫码
移动端-->>后端: 授权登录
PC->>后端: 轮询获取授权状态

1. PC获取二维码ID

2. PC绘制二维码

<template>
  <div v-loading="loadingV">
    <canvas ref="qr-canvas" style="display: block; width: 212px; height: 212px; margin: 0 auto"></canvas>
  </div>
</template>

 this.qrCode = data.qrCode
 let qrCanvas = this.$refs['qr-canvas']
 let width = qrCanvas.clientWidth
 QRCode.toCanvas(this.$refs['qr-canvas'], this.qrCode, {
     width: width,
     height: width,
     margin: 1
 })

3. 移动端扫码操作

4. PC端轮询操作状态

     getQrCodePwd() {
      axios
        .get(`/api/qrCode/${this.qrCode}`, null, {
          loading: false
        })
        .then(({ data }) => {
          clearTimeout(this.timeA)
          if (data.status === 200) {
            // 授权登录成功 执行后续登录流程
          } else {
             // 轮询获取授权状态
            this.timeA = setTimeout(() => {
              this.getQrCodePwd()
            }, 2000)
          }
        })
    },

5. 成功-登录成功