Vue PC前端扫码登录
2023-09-27 14:27:34 时间
需求描述
目前大多数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.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-elementui 图片上传踩坑 前端转base64 自动补齐白块 固定像素
- 【vue+axios】一个项目学会前端实现登录拦截
- 结合Vue.js的前端压缩图片方案
- vue项目打包发布
- vue经典面试题,帮你准备未来的面试《一》
- 138.(前端)数据统计显示图表——vue子组件的挂载与echarts基本效果实现
- 127.(前端)富文本的使用——vue使用超文本
- 16.(前端)vue-ui创建项目
- 24.Vue开发前端的准备
- 【前端】VUE UI
- Vue.js 运行环境搭建详解(基于windows的手把手安装教学)
- 推荐9个大气美观的前后端分离项目:前端react,vue,ts,ElementUI,Angular等,后端mysql,springBoot,myBatis,springSecurity,cloud等
- Vue学习(二十五)TS支持
- vue+element的表格分页和前端搜索
- Vue.js最佳实践(五招让你成为Vue.js大师)
- Vue 使用History记录上一页面的数据
- 【实战】Vue Element+Node.js开发企业通用管理后台系统——前端框架搭建
- vue非常实用的几行代码【日期处理、字符串处理、数组处理、颜色操作】
- 前端vue路由模块拆分归类【理解版】
- 前端vue正则表达式-隐私脱敏处理
- 前端添加水印效果攻略【vue和原生js添加方式】
- 前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】
- [前端学习]一文 Vue指令
- vue.js与其他前端框架的对比
- Javascript/CSS/HTML/vue/angularJS/react/jquery/DOM前端编程经典电子书pdf下载
- vue 单页应用(spa)前端路由实现原理
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
- 博客前端vue和豆瓣页面
- 低仿饿了么H5-纯前端Vue版 + 手把手教学
- vue——quill-editor自定义图片上传