站長(zhǎng)資訊網(wǎng)
本篇文章給大家?guī)砹岁P(guān)于Vue的相關(guān)知識(shí)，其中主要介紹了在PC端實(shí)現(xiàn)掃碼的原理是什么？怎么生成二維碼圖片？怎么用Vue實(shí)現(xiàn)前端掃碼登錄？感興趣的朋友，下面一起來看一下吧，希望對(duì)大家有幫助。
需求描述
目前大多數(shù)PC端應(yīng)用都有配套的移動(dòng)端APP，如微信，淘寶等，通過使用手機(jī)APP上的掃一掃功能去掃頁(yè)面二維碼圖片進(jìn)行登錄，使得用戶登錄操作更方便，安全，快捷。
思路解析
PC 掃碼原理？
掃碼登錄功能涉及到網(wǎng)頁(yè)端、服務(wù)器和手機(jī)端，三端之間交互大致步驟如下：
-
網(wǎng)頁(yè)端展示二維碼，同時(shí)不斷的向服務(wù)端發(fā)送請(qǐng)求詢問該二維碼的狀態(tài)；
-
手機(jī)端掃描二維碼，讀取二維碼成功后，跳轉(zhuǎn)至確認(rèn)登錄頁(yè)，若用戶確認(rèn)登錄，則服務(wù)器修改二維碼狀態(tài)，并返回用戶登錄信息；
-
網(wǎng)頁(yè)端收到服務(wù)器端二維碼狀態(tài)改變，則跳轉(zhuǎn)登錄后頁(yè)面；
-
若超過一定時(shí)間用戶未操作，網(wǎng)頁(yè)端二維碼失效，需要重新刷新生成新的二維碼。
前端功能實(shí)現(xiàn)
如何生成二維碼圖片？
- 二維碼內(nèi)容是一段字符串，可以使用uuid 作為二維碼的唯一標(biāo)識(shí);
- 使用qrcode插件 import QRCode from 'qrcode'; 把uuid變?yōu)槎S碼展示給用戶
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 = ''
登錄后復(fù)制
如何控制二維碼的時(shí)效性？
使用前端計(jì)時(shí)器setInterval, 初始化有效時(shí)間effectiveTime, 倒計(jì)時(shí)失效后重新刷新二維碼
export default { name: "qrCode", data() { return { codeStatus: 1, // 1- 未掃碼 2-掃碼通過 3-過期 effectiveTime: 30, // 有效時(shí)間 qrCodeTimer: null // 有效時(shí)長(zhǎng)計(jì)時(shí)器 uid: '', time: '' }; }, methods: { // 輪詢獲取二維碼狀態(tài) 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() } },
登錄后復(fù)制
前端如何獲取服務(wù)器二維碼的狀態(tài)？
前端向服務(wù)端發(fā)送二維碼狀態(tài)查詢請(qǐng)求，通常使用輪詢的方式
- 定時(shí)輪詢：間隔1s 或特定時(shí)段發(fā)送請(qǐng)求，通過調(diào)用setInterval(), clearInterval()來停止；
- 長(zhǎng)輪詢：前端判斷接收到的返回結(jié)果，若二維碼仍未被掃描，則會(huì)繼續(xù)發(fā)送查詢請(qǐng)求，直至狀態(tài)發(fā)生變化（失效或掃碼成功）
- Websocket：前端在生成二維碼后，會(huì)與后端建立連接，一旦后端發(fā)現(xiàn)二維碼狀態(tài)變化，可直接通過建立的連接主動(dòng)推送信息給前端。
使用長(zhǎng)輪詢實(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("二維碼過期") 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; } } },
登錄后復(fù)制
推薦學(xué)習(xí)：《vue.js視頻教程》
