日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

本篇文章給大家帶來了關于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.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掃碼登錄功能
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定