Vue?PC前端掃碼登錄功能實(shí)現(xiàn)

更新時(shí)間：2022年12月29日 10:33:26 作者：前端碎碎念

最近在做APP客戶(hù)端掃描PC端二維碼登錄,于是記錄一下實(shí)現(xiàn)過(guò)程,下面這篇文章主要給大家介紹了關(guān)于Vue?PC前端掃碼登錄功能實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

需求描述

目前大多數(shù)PC端應(yīng)用都有配套的移動(dòng)端APP，如微信，淘寶等，通過(guò)使用手機(jī)APP上的掃一掃功能去掃頁(yè)面二維碼圖片進(jìn)行登錄，使得用戶(hù)登錄操作更方便，安全，快捷。

思路解析

PC 掃碼原理？

掃碼登錄功能涉及到網(wǎng)頁(yè)端、服務(wù)器和手機(jī)端，三端之間交互大致步驟如下：

網(wǎng)頁(yè)端展示二維碼，同時(shí)不斷的向服務(wù)端發(fā)送請(qǐng)求詢(xún)問(wèn)該二維碼的狀態(tài)；
手機(jī)端掃描二維碼，讀取二維碼成功后，跳轉(zhuǎn)至確認(rèn)登錄頁(yè)，若用戶(hù)確認(rèn)登錄，則服務(wù)器修改二維碼狀態(tài)，并返回用戶(hù)登錄信息；
網(wǎng)頁(yè)端收到服務(wù)器端二維碼狀態(tài)改變，則跳轉(zhuǎn)登錄后頁(yè)面；
若超過(guò)一定時(shí)間用戶(hù)未操作，網(wǎng)頁(yè)端二維碼失效，需要重新刷新生成新的二維碼。

前端功能實(shí)現(xiàn)

如何生成二維碼圖片？

二維碼內(nèi)容是一段字符串，可以使用uuid 作為二維碼的唯一標(biāo)識(shí);
使用qrcode插件 import QRCode from 'qrcode'; 把uuid變?yōu)槎S碼展示給用戶(hù)

import {v4 as uuidv4} from "uuid"
import QRCode from "qrcodejs2"
 let timeStamp = new Date().getTime() // 生成時(shí)間戳，用于后臺(tái)校驗(yàn)有效期
 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 = ''

如何控制二維碼的時(shí)效性？

使用前端計(jì)時(shí)器setInterval, 初始化有效時(shí)間effectiveTime, 倒計(jì)時(shí)失效后重新刷新二維碼

export default {
  name: "qrCode",
  data() {
    return {
      codeStatus: 1, // 1- 未掃碼 2-掃碼通過(guò) 3-過(guò)期
      effectiveTime: 30, // 有效時(shí)間
      qrCodeTimer: null // 有效時(shí)長(zhǎng)計(jì)時(shí)器
      uid: '',
      time: ''
    };
  },

  methods: {
    // 輪詢(xún)獲取二維碼狀態(tài)
    getQcodeStatus() {
      if(!this.qsCodeTimer) {
        this.qrCodeTimer = setInterval(()=> {
          // 二維碼過(guò)期
          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()
    }
  },

前端如何獲取服務(wù)器二維碼的狀態(tài)？

前端向服務(wù)端發(fā)送二維碼狀態(tài)查詢(xún)請(qǐng)求，通常使用輪詢(xún)的方式

定時(shí)輪詢(xún)：間隔1s 或特定時(shí)段發(fā)送請(qǐng)求，通過(guò)調(diào)用setInterval(), clearInterval()來(lái)停止；
長(zhǎng)輪詢(xún)：前端判斷接收到的返回結(jié)果，若二維碼仍未被掃描，則會(huì)繼續(xù)發(fā)送查詢(xún)請(qǐng)求，直至狀態(tài)發(fā)生變化（失效或掃碼成功）
Websocket：前端在生成二維碼后，會(huì)與后端建立連接，一旦后端發(fā)現(xiàn)二維碼狀態(tài)變化，可直接通過(guò)建立的連接主動(dòng)推送信息給前端。

使用長(zhǎng)輪詢(xún)實(shí)現(xiàn)：

 // 獲取后臺(tái)狀態(tài)
    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("二維碼過(guò)期")
              clearInterval(this.qsCodeTimer)
              this.qsCodeTimer = null
              this.effectiveTime = 0
            break;
            case 2:
              console.log("掃碼通過(guò)")
              clearInterval(this.qsCodeTimer)
              this.qsCodeTimer = null
              this.$emit("login", loginData)
            break;
            case 1:
              console.log("未掃碼")
              this.effectiveTime > 0  && this.checkQRcodeStatus()
            break;
            default:
            break;
         }
       } 
    },