所属分类：web前端开发
本篇文章给大家带来了关于Vue的相关知识，其中主要介绍了在PC端实现扫码的原理是什么？怎么生成二维码图片？怎么用Vue实现前端扫码登录？感兴趣的朋友，下面一起来看一下吧，希望对大家有帮助。
目前大多数PC端应用都有配套的移动端APP，如微信，淘宝等，通过使用手机APP上的扫一扫功能去扫页面二维码图片进行登录，使得用户登录操作更方便，安全，快捷。
扫码登录功能涉及到网页端、服务器和手机端，三端之间交互大致步骤如下：
网页端展示二维码，同时不断的向服务端发送请求询问该二维码的状态；
手机端扫描二维码，读取二维码成功后，跳转至确认登录页，若用户确认登录，则服务器修改二维码状态，并返回用户登录信息；
网页端收到服务器端二维码状态改变，则跳转登录后页面；
若超过一定时间用户未操作，网页端二维码失效，需要重新刷新生成新的二维码。
微博登录
QQ登录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()
}
},登录后复制前端向服务端发送二维码状态查询请求，通常使用轮询的方式
使用长轮询实现：
// 获取后台状态
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视频教程》
以上就是详解Vue PC端如何实现扫码登录功能的详细内容，更多请关注zzsucai.com其它相关文章！
