Dieser Artikel vermittelt Ihnen relevantes Wissen über Vue. Er stellt hauptsächlich das Prinzip der Implementierung des Code-Scannens auf der PC-Seite vor. Wie erstelle ich ein QR-Code-Bild? Wie verwende ich Vue, um die Front-End-QR-Code-Anmeldung zu implementieren? Für diejenigen, die interessiert sind, werfen wir einen Blick unten. Ich hoffe, es wird für alle hilfreich sein.
Derzeit verfügen die meisten PC-Anwendungen über unterstützende mobile APPs wie WeChat, Taobao usw. Mithilfe der Scanfunktion der mobilen APP können Sie das QR-Codebild auf der Seite scannen, um sich anzumelden. Dadurch wird die Benutzeranmeldung bequemer, sicherer und schneller.
Die Code-Scan-Anmeldefunktion umfasst die Webseite, den Server und das Mobiltelefon. Die allgemeinen Schritte der Interaktion zwischen den drei Enden sind wie folgt:
Die Webseite zeigt den QR-Code an und sendet gleichzeitig kontinuierlich Anfragen zum Server, um nach dem QR-Code zu fragen.
Nach erfolgreichem Lesen des QR-Codes wird zur Anmeldebestätigungsseite gesprungen Ändern Sie den QR-Code-Status und geben Sie die Anmeldeinformationen des Benutzers zurück.
Wenn die Webseite die Statusänderung des serverseitigen QR-Codes empfängt, springt sie zur Post-Anmeldeseite.
Wenn der Benutzer dies tut Wenn das Gerät für einen bestimmten Zeitraum nicht funktioniert, wird der QR-Code auf der Webseite ungültig und muss aktualisiert werden, um einen neuen QR-Code zu generieren.
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 = ''
Verwenden Sie den Front-End-Timer setInterval, um die effektive Zeit zu initialisieren und den QR-Code nach Ablauf des Countdowns zu aktualisieren
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() } },
Das Frontend sendet eine QR-Code-Statusabfrageanforderung an den Server, normalerweise mithilfe von Polling
使用长轮询实现:
// 获取后台状态 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视频教程》
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Implementierung der QR-Code-Anmeldefunktion auf der Vue-PC-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!