vue app扫PC端二维码登录

小咪咪 2021-09-03 07:12 507阅读 0赞

1.  通过接口获取二维码唯一标识，例如：qrcodeId
2.  通过 qrcodejs2插件生成 二维码（二维码内容就是 qrcodeId，具体根据APP 需要）
3.  循环调用接口，查看扫码状态（app是否扫码确认登录）

//下载插件
    npm install --save qrcodejs2 
     
    <template>
      <div>
        <div id="qrcode"></div> 
      </div>
    </template>
     
    <script>
    import QRCode from 'qrcodejs2'  // 引入qrcode
    export default {
      methods: {
        handover() {
          //获取二维码
          getQRCode().then((res) => {
            let { msg, code, data } = res;
            if (code != "success") return;
            //清除上一次生成的二维码（看需要 如只生成一次则不需要）
            //document.getElementById("qrcode").innerHTML = "";
            //生成二维码
            let qrcode = new QRCode("qrcode", {
              width: 140,
              height: 140,
              text: `qrcodeId:${data.qrcodeId},exp:${data.exp}`, //需要生成的内容（看APP需要）
            });
            qrcode._el.title = ""; //清除标题，不然鼠标停留在二维码上面会暴露二维码内容
            //循环调用接口查看扫码状态
            this.loopLook();
          });
        },
      },
      //循环调用接口 查看扫码状态
      loopLook() {
        let params = {
          qrcode: "111",
        };
        LoginByRcode(params).then((res) => {
          let { msg, code, data } = res;
          if (data == "二维码过期！") {
            //二维码过期
          } else if (code == "success") {
            //app 确认登录
            this.$router.push("/index");
          } else {
            //请求成功 一秒钟调用一次查看状态
            setTimeout(() => {
              this.loopLook();
            }, 1000);
          }
        });
      },
    };
    </script>

第二种就是建立长连接了，websocket