vue qrcodejs2生成二维码实现手机APP扫码进行web网页登录

在vue中使用 qrcodejs2

1.安装

npm install  qrcodejs2 --save

2.引入

import QRCode from "qrcodejs2"

 3.生成二维码

（一）放二维码的标签

<div class="qrcode" ref="qrCodeUrl"></div>

（二）生成二维码

methods: {
    creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: 'content',  //需要转换为二维码的内容
            width: 100, //二维码宽度
            height: 100,  //二维码高度
            colorDark: '#000000', //前景色   
            colorLight: '#ffffff', //后景色
            correctLevel: QRCode.CorrectLevel.L //容错级别
        })
    }
},
mounted() {
    this.creatQrCode()
}

实现功能：用手机app扫码，实现pc端扫码登录

pc端扫码可以便捷地实现登录，避免了过多地输入。但是手机APP扫pc端的二维码时只能pc端向手机传递信息，而pc端无法获取到手机登录的权限，如果让pc端再去输入登录的token是不现实的。因此pc在APP传递信息时需要将自己的信息传给APP，APP在拿到信息以后同时携带APP的信息一并传给服务器。这样服务器才能知道是哪个pc端需要登录。

功能实现大致过程：

过程1，2，3中pc端携带着pc端设备的信息向服务端发起请求，服务端返回token1。而pc端需要用token1生成二维码，让手机APP扫码的时候可以获取到token1。

过程4，5。手机端APP扫码后拿到token1，然后携带着token1和APP自身的token2一起向服务端发起请求，让服务端将手机APP和pc端绑定在一起。接着还需要确认登录，告诉服务器允许当前的pc端登录。

过程6。pc端需要不断轮询，查看手机是否扫码，当扫成功后pc端页面展示“扫码成功”并继续轮询，当APP确认登录后，pc端展示“成功登录”并跳转页面

轮询代码：

const interval = setInterval(() => {
      //此处换成你服务器自己的地址
      qrcodeState
        .get("http://192.168.0.103:8888/qrcode/getStatus?code=" + this.code)
        .then((res) => {
          if (res.data.data.status == "yes") {
            this.text = "扫描成功，请确认登陆";
            this.isScan = true;
          }
          if (res.data.data.status == "success") {
            this.text = "登陆成功";
            this.userName = res.data.data.userName;
            clearInterval(interval); //停止
          }
        });
    }, 1000);

这是个较为简单的二维码登录，还需要完善“二维码过期”等功能。