1. Function Description Display two-dimensional code on PC and use APP scan code to realize login function on PC. This paper only focuses on PC

2. Implementation steps:

  • Generate qr code
  • Polls the STATUS of qr codes

3. Implementation

  • Import {v4 as uuidv4} from ‘uuid’; The essence of two-dimensional code is a string of strings, using this package tool to generate two-dimensional code
  • Import qrcode from ‘qrcode’; Turn the UUID into a TWO-DIMENSIONAL code and show it to the user
QRCode.toCanvas(document.getElementById('canvas'), uuid, { width: 170 }, (error) => {
      if (error) console.error(error);
    });
Copy the code
  • After the generation and display of the TWO-DIMENSIONAL code is completed, the next step is to call the interface polling to update the status of the two-dimensional code
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 === 'succcess ') {setIsScanSucccess(true); clearInterval(checkInterval); }}}); }, 2000); };Copy the code

To this function demo is basically completed