vue项目app扫码登录pc

• 需求：APP 扫码登录
• 思路： 

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

 case：

 

//下载插件
npm install --save qrcodejs2 

<template>
  <div>
    <div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode -->
  </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>

使用定时器记得清除，这里楼主就偷个懒