1.功能简述 pc端显示二维码 使用app扫码 在pc端实现登陆功能 本篇只围绕pc端的实现
2.实现步骤:
- 生成二维码
- 轮询二维码状态
3.具体实现
- 使用uuid包 import { v4 as uuidv4 } from 'uuid'; 二维码的本质就是一串字符串,利用这个包工具生成二维码
- 使用qrcode插件 import QRCode from 'qrcode'; 把uuid变为二维码展示给用户
QRCode.toCanvas(document.getElementById('canvas'), uuid, { width: 170 }, (error) => {
if (error) console.error(error);
});
- 到此完成了二维码的生成和展示,接下来需要调用接口轮询更新二维码的状态
const getQcodeStatus = () => {
const uuid = sessionStorage.getItem('loginToken');
clearInterval(checkInterval);
intervalTimes = 90;
checkInterval = setInterval(() => {
if(loginMethod !==true){
clearInterval(checkInterval);
}
if (intervalTimes < 1) {
clearInterval(checkInterval);
sessionStorage.clear();
// childRef.current.qrcodeLose();
setIsDisabled(true);
return;
}
// eslint-disable-next-line no-plusplus
intervalTimes--;
dispatch({
type: 'login/qrcodeLogin',
payload: {
token: uuid,
},
callback: (res) => {
const { message, data } = res;
if (message === '操作成功') {
setIsScanSucccess(true);
clearInterval(checkInterval);
}
},
});
}, 2000);
};
到此该功能demo基本完成