本文小編為大家詳細介紹“Vue PC端怎么實現(xiàn)掃碼登錄功能”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“Vue PC端怎么實現(xiàn)掃碼登錄功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

創(chuàng)新互聯(lián)是一家網(wǎng)站設計公司，集創(chuàng)意、互聯(lián)網(wǎng)應用、軟件技術為一體的創(chuàng)意網(wǎng)站建設服務商，主營產(chǎn)品：響應式網(wǎng)站設計、品牌網(wǎng)站設計、全網(wǎng)營銷推廣。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡互動的體驗，以及在手機等移動端的優(yōu)質呈現(xiàn)。網(wǎng)站設計制作、成都做網(wǎng)站、移動互聯(lián)產(chǎn)品、網(wǎng)絡運營、VI設計、云產(chǎn)品.運維為核心業(yè)務。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價值服務。

需求描述

目前大多數(shù)PC端應用都有配套的移動端APP，如微信，淘寶等，通過使用手機APP上的掃一掃功能去掃頁面二維碼圖片進行登錄，使得用戶登錄操作更方便，安全，快捷。

思路解析

PC 掃碼原理？

掃碼登錄功能涉及到網(wǎng)頁端、服務器和手機端，三端之間交互大致步驟如下：

• 網(wǎng)頁端展示二維碼，同時不斷的向服務端發(fā)送請求詢問該二維碼的狀態(tài)；

• 手機端掃描二維碼，讀取二維碼成功后，跳轉至確認登錄頁，若用戶確認登錄，則服務器修改二維碼狀態(tài)，并返回用戶登錄信息；

• 網(wǎng)頁端收到服務器端二維碼狀態(tài)改變，則跳轉登錄后頁面；

• 若超過一定時間用戶未操作，網(wǎng)頁端二維碼失效，需要重新刷新生成新的二維碼。

前端功能實現(xiàn)

如何生成二維碼圖片？

• 二維碼內(nèi)容是一段字符串，可以使用uuid 作為二維碼的唯一標識;

• 使用qrcode插件 import QRCode from 'qrcode'; 把uuid變?yōu)槎S碼展示給用戶

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: {
    // 輪詢獲取二維碼狀態(tài)
    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()
    }
  },

前端如何獲取服務器二維碼的狀態(tài)？

前端向服務端發(fā)送二維碼狀態(tài)查詢請求，通常使用輪詢的方式

• 定時輪詢：間隔1s 或特定時段發(fā)送請求，通過調(diào)用setInterval(), clearInterval()來停止；

• 長輪詢：前端判斷接收到的返回結果，若二維碼仍未被掃描，則會繼續(xù)發(fā)送查詢請求，直至狀態(tài)發(fā)生變化（失效或掃碼成功）

• Websocket：前端在生成二維碼后，會與后端建立連接，一旦后端發(fā)現(xiàn)二維碼狀態(tài)變化，可直接通過建立的連接主動推送信息給前端。

使用長輪詢實現(xiàn)：

 // 獲取后臺狀態(tài)
    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 PC端怎么實現(xiàn)掃碼登錄功能”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：VuePC端怎么實現(xiàn)掃碼登錄功能
轉載來于：http://www.chinadenli.net/article48/jcoeep.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、電子商務、App設計、小程序開發(fā)、Google、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)