• 技术文章 >web前端 >Vue.js

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

    藏色散人藏色散人2023-01-25 08:30:02转载63

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

    需求描述

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

    思路解析

    PC 扫码原理?

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

    前端功能实现

    如何生成二维码图片?

    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端如何实现扫码登录功能的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:juejin,如有侵犯,请联系admin@php.cn删除
    专题推荐:前端 Vue.js
    上一篇:深入探讨vite是怎么解析.env文件的 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 一文带你详解Vue中的组件化编程• 一文详解vue怎么实现v-model(附代码示例)• 深入聊聊vue3中的reactive()• 详解Vue3响应式的两大利器:ref与reactive• Vue作者尤雨溪发文展望2023,回顾2022!
    1/1

    PHP中文网