app端扫码登陆功能(pc端的实现)

1,092 阅读1分钟

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基本完成