Detailed explanation of how to implement the QR code login function on the Vue PC side

This article brings you relevant knowledge about Vue. It mainly introduces the principle of implementing code scanning on the PC side? How to generate a QR code image? How to use Vue to implement front-end QR code login? For those who are interested, let’s take a look below. I hope it will be helpful to everyone.

Requirement Description

Currently, most PC applications have supporting mobile APPs, such as WeChat, Taobao, etc. By using the scan on the mobile APP The scan function is used to scan the QR code image on the page to log in, making the user login operation more convenient, safe and fast.

Idea Analysis

Principle of PC scanning code?

The scan code login function involves the web page, the server and the mobile phone. The general steps of interaction between the three ends are as follows:

• The web page displays the QR code and continuously Send a request to the server to inquire about the status of the QR code;

• The mobile phone scans the QR code. After successfully reading the QR code, it jumps to the confirmation login page. If the user After confirming the login, the server will modify the QR code status and return the user login information;

• The web page will jump to the post-login page after receiving the server-side QR code status change;

• If the user does not operate for a certain period of time, the QR code on the web page will become invalid, and a new QR code needs to be refreshed and generated.

Front-end function implementation

How to generate a QR code image?

• The content of the QR code is a string, you can use uuid as the unique identifier of the QR code;
• Use the qrcode plug-in import QRCode from 'qrcode'; to change the uuid into two The QR code is displayed to the user

import {v4 as uuidv4} from "uuid"
import QRCode from "qrcodejs2"
 let timeStamp = new Date().getTime() // 生成时间戳，用于后台校验有效期
 let uuid = uuidv4()
 let content = `uid=${uid}&timeStamp=${timeStamp}`
 this.$nextTick(()=> {
     const qrcode = new QRCode(this.$refs.qrcode, {
       text: content,
       width: 180,
       height: 180,
       colorDark: "#333333",
       colorlight: "#ffffff",
       correctLevel: QRCode.correctLevel.H,
       render: "canvas"
     })
     qrcode._el.title = ''

How to control the timeliness of the QR code?

Use the front-end timer setInterval, initialize the effective time effectiveTime, and refresh the QR code after the countdown expires

export default {
  name: "qrCode",
  data() {
    return {
      codeStatus: 1, // 1- 未扫码 2-扫码通过 3-过期
      effectiveTime: 30, // 有效时间
      qrCodeTimer: null // 有效时长计时器
      uid: '',
      time: ''
    };
  },

  methods: {
    // 轮询获取二维码状态
    getQcodeStatus() {
      if(!this.qsCodeTimer) {
        this.qrCodeTimer = setInterval(()=> {
          // 二维码过期
          if(this.effectiveTime <=0) {
            this.codeStatus = 3
            clearInterval(this.qsCodeTimer)
            this.qsCodeTimer = null
            return
          }
          this.effectiveTime--
        }, 1000)
      }

    },
   
    // 刷新二维码
    refreshCode() {
      this.codeStatus = 1
      this.effectiveTime = 30
      this.qsCodeTimer = null
      this.generateORCode()
    }
  },

How does the front-end obtain the status of the server QR code?

The front end sends a QR code status query request to the server, usually using polling

• 定时轮询：间隔1s 或特定时段发送请求，通过调用setInterval(), clearInterval()来停止；
• 长轮询：前端判断接收到的返回结果，若二维码仍未被扫描，则会继续发送查询请求，直至状态发生变化（失效或扫码成功）
• Websocket：前端在生成二维码后，会与后端建立连接，一旦后端发现二维码状态变化，可直接通过建立的连接主动推送信息给前端。

使用长轮询实现：

 // 获取后台状态
    async checkQRcodeStatus() {
       const res = await checkQRcode({
         uid: this.uid,
         time: this.time
       })
       if(res && res.code == 200) {
         let codeStatus - res.codeStatus
         this.codeStatus =  codeStatus
         let loginData = res.loginData
         switch(codeStatus) {
           case 3:
              console.log("二维码过期")
              clearInterval(this.qsCodeTimer)
              this.qsCodeTimer = null
              this.effectiveTime = 0
            break;
            case 2:
              console.log("扫码通过")
              clearInterval(this.qsCodeTimer)
              this.qsCodeTimer = null
              this.$emit("login", loginData)
            break;
            case 1:
              console.log("未扫码")
              this.effectiveTime > 0  && this.checkQRcodeStatus()
            break;
            default:
            break;
         }
       } 
    },

推荐学习：《vue.js视频教程》

The above is the detailed content of Detailed explanation of how to implement the QR code login function on the Vue PC side. For more information, please follow other related articles on the PHP Chinese website!