- 需求:APP 扫码登录
- 思路:
- 通过接口获取二维码唯一标识,例如:qrcodeId
- 通过 qrcodejs2插件生成 二维码(二维码内容就是 qrcodeId,具体根据APP 需要)
- 循环调用接口,查看扫码状态(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>