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

.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:16px;overflow-x:hidden;color:#252933}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:24px;line-height:38px;margin-bottom:5px}.markdown-body h2{font-size:22px;line-height:34px;padding-bottom:12px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:20px;line-height:28px}.markdown-body h4{font-size:18px;line-height:26px}.markdown-body h5{font-size:17px;line-height:24px}.markdown-body h6{font-size:16px;line-height:24px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:””}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body ul li{margin-bottom:0;list-style:inherit}.markdown-body ol li .task-list-item,.markdown-body ul li .task-list-item{list-style:none}.markdown-body ol li .task-list-item ol,.markdown-body ol li .task-list-item ul,.markdown-body ul li .task-list-item ol,.markdown-body ul li .task-list-item ul{margin-top:0}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:3px}.markdown-body ol li{padding-left:6px}.markdown-body .contains-task-list{padding-left:0}.markdown-body .task-list-item{list-style:none}@media (max-width:720px){.markdown-body h1{font-size:24px}.markdown-body h2{font-size:20px}.markdown-body h3{font-size:18px}}

需求描述

目前大多数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 
前端如何获取服务器二维码的状态？
前端向服务端发送二维码状态查询请求，通常使用轮询的方式

登录后复制定时轮询：间隔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.js视频教程》

以上就是详解Vue PC端如何实现扫码登录功能的详细内容，更多请关注【创想鸟】其它相关文章！