当前位置：首页 > VUE

vue扫码登录代码实现

2026-03-27 05:09:19VUE

Vue 扫码登录实现方案

依赖安装 需要安装qrcode和axios库生成二维码和处理网络请求：

npm install qrcode axios

生成二维码组件

创建QRCode.vue组件，用于展示动态生成的二维码：

<template>
  <div>
    <canvas ref="canvas"></canvas>
    <p>{{ statusText }}</p>
  </div>
</template>

<script>
import QRCode from 'qrcode'
export default {
  props: ['loginUrl'],
  data() {
    return {
      statusText: '请扫码登录',
      timer: null
    }
  },
  mounted() {
    this.generateQR()
    this.startPolling()
  },
  methods: {
    async generateQR() {
      try {
        await QRCode.toCanvas(this.$refs.canvas, this.loginUrl)
      } catch (err) {
        console.error(err)
      }
    },
    startPolling() {
      this.timer = setInterval(() => {
        this.checkLoginStatus()
      }, 3000)
    },
    async checkLoginStatus() {
      // 实际项目中替换为你的API接口
      const res = await axios.get('/api/check-login')
      if (res.data.loggedIn) {
        clearInterval(this.timer)
        this.statusText = '登录成功'
        this.$emit('login-success', res.data.userInfo)
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

后端接口设计

需要实现两个核心接口：

生成临时token接口

router.get('/api/generate-token', (req, res) => {
  const token = generateRandomToken() // 实现自己的token生成逻辑
  const loginUrl = `https://yourdomain.com/login-confirm?token=${token}`
  // 存储token到数据库或缓存，设置过期时间
  res.json({ loginUrl, token })
})

检查登录状态接口

router.get('/api/check-login', (req, res) => {
  const { token } = req.query
  // 查询数据库或缓存验证token状态
  if (tokenIsValid(token)) {
    res.json({ loggedIn: true, userInfo: getUserInfo(token) })
  } else {
    res.json({ loggedIn: false })
  }
})

移动端扫码处理

在移动端页面实现登录确认逻辑：

// 移动端页面代码
const urlParams = new URLSearchParams(window.location.search)
const token = urlParams.get('token')

if (token) {
  axios.post('/api/confirm-login', { token })
    .then(() => {
      alert('登录确认成功')
      window.close()
    })
}

父组件集成

在父组件中使用二维码组件：

<template>
  <div>
    <QRCode 
      :loginUrl="loginUrl" 
      @login-success="handleLoginSuccess"
    />
  </div>
</template>

<script>
import QRCode from './QRCode.vue'
export default {
  components: { QRCode },
  data() {
    return {
      loginUrl: ''
    }
  },
  async created() {
    const res = await axios.get('/api/generate-token')
    this.loginUrl = res.data.loginUrl
  },
  methods: {
    handleLoginSuccess(userInfo) {
      // 处理登录成功逻辑
      this.$router.push('/dashboard')
    }
  }
}
</script>