当前位置：首页 > VUE

vue实现扫描登录

2026-01-19 12:05:54VUE

实现扫描登录的基本原理

扫描登录通常涉及生成二维码，用户通过移动设备扫描后完成身份验证。核心流程包括：前端生成二维码并轮询状态，后端验证扫码结果并返回登录凭证。

安装必要依赖

需要安装qrcode库生成二维码，以及axios处理HTTP请求：

vue实现扫描登录

npm install qrcode axios

前端实现步骤

创建二维码生成组件

vue实现扫描登录

<template>
  <div>
    <canvas ref="qrcodeCanvas"></canvas>
    <p v-if="status">{{ statusMessage }}</p>
  </div>
</template>

<script>
import QRCode from 'qrcode'
import axios from 'axios'

export default {
  data() {
    return {
      timer: null,
      status: '',
      statusMessage: '',
      token: ''
    }
  },
  mounted() {
    this.generateToken()
  },
  methods: {
    async generateToken() {
      const response = await axios.post('/api/generate-token')
      this.token = response.data.token
      QRCode.toCanvas(this.$refs.qrcodeCanvas, this.token)
      this.startPolling()
    },
    startPolling() {
      this.timer = setInterval(async () => {
        const response = await axios.get(`/api/check-status?token=${this.token}`)
        if (response.data.verified) {
          clearInterval(this.timer)
          this.status = 'success'
          this.statusMessage = '登录成功'
          this.$emit('logged-in', response.data.user)
        }
      }, 2000)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

后端接口设计

需要实现两个关键接口：

POST /api/generate-token 生成唯一令牌并返回
GET /api/check-status 检查扫码状态

Node.js示例实现

const tokens = new Map()

app.post('/api/generate-token', (req, res) => {
  const token = generateRandomString(32)
  tokens.set(token, { status: 'pending' })
  res.json({ token })
})

app.get('/api/check-status', (req, res) => {
  const token = req.query.token
  const data = tokens.get(token)
  if (!data) return res.status(404).end()
  res.json({ verified: data.status === 'verified', user: data.user })
})

// 移动端确认登录接口
app.post('/api/confirm-login', (req, res) => {
  const { token, user } = req.body
  if (tokens.has(token)) {
    tokens.set(token, { status: 'verified', user })
    res.json({ success: true })
  }
})