本文小编为大家详细介绍“Vue PC端怎么实现扫码登录功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue PC端怎么实现扫码登录功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。.markdown-bod
本文小编为大家详细介绍“Vue PC端怎么实现扫码登录功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue PC端怎么实现扫码登录功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
目前大多数PC端应用都有配套的移动端APP,如微信,淘宝等,通过使用手机APP上的扫一扫功能去扫页面二维码图片进行登录,使得用户登录操作更方便,安全,快捷。
扫码登录功能涉及到网页端、服务器和手机端,三端之间交互大致步骤如下:
网页端展示二维码,同时不断的向服务端发送请求询问该二维码的状态;
手机端扫描二维码,读取二维码成功后,跳转至确认登录页,若用户确认登录,则服务器修改二维码状态,并返回用户登录信息;
网页端收到服务器端二维码状态改变,则跳转登录后页面;
若超过一定时间用户未操作,网页端二维码失效,需要重新刷新生成新的二维码。
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 = ''
使用前端计时器setInterval, 初始化有效时间effectiveTime, 倒计时失效后重新刷新二维码
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() } },
前端向服务端发送二维码状态查询请求,通常使用轮询的方式
定时轮询:间隔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 PC端怎么实现扫码登录功能”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网精选频道。
--结束END--
本文标题: Vue PC端怎么实现扫码登录功能
本文链接: https://www.lsjlt.com/news/348771.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-06
2024-05-06
2024-05-06
2024-05-06
2024-05-06
2024-05-06
2024-05-06
2024-05-06
2024-05-06
2024-05-06
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0