详解Vue PC端如何实现扫码登录功能

您所在的位置：网站首页 › 前端扫码登录怎么实现的 › 详解Vue PC端如何实现扫码登录功能

详解Vue PC端如何实现扫码登录功能

2024-07-16 11:47| 来源: 网络整理| 查看: 265

本篇文章给大家带来了关于Vue的相关知识，其中主要介绍了在PC端实现扫码的原理是什么？怎么生成二维码图片？怎么用Vue实现前端扫码登录？感兴趣的朋友，下面一起来看一下吧，希望对大家有帮助。

需求描述

目前大多数PC端应用都有配套的移动端APP，如微信，淘宝等，通过使用手机APP上的扫一扫功能去扫页面二维码图片进行登录，使得用户登录操作更方便，安全，快捷。

思路解析 PC 扫码原理？

扫码登录功能涉及到网页端、服务器和手机端，三端之间交互大致步骤如下：

网页端展示二维码，同时不断的向服务端发送请求询问该二维码的状态；

手机端扫描二维码，读取二维码成功后，跳转至确认登录页，若用户确认登录，则服务器修改二维码状态，并返回用户登录信息；

网页端收到服务器端二维码状态改变，则跳转登录后页面；

若超过一定时间用户未操作，网页端二维码失效，需要重新刷新生成新的二维码。

前端功能实现如何生成二维码图片？二维码内容是一段字符串，可以使用uuid 作为二维码的唯一标识;使用qrcode插件 import QRCode from 'qrcode'; 把uuid变为二维码展示给用户

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.checkQRcodeStatus() break; default: break; } } },

【本文地址】

详解Vue PC端如何实现扫码登录功能

详解Vue PC端如何实现扫码登录功能

今日新闻

推荐新闻