当前位置：首页 > VUE

vue扫码登录代码实现

2026-01-12 07:05:55VUE

Vue 扫码登录实现方案

准备工作

确保项目已安装 Vue 2/3 及相关依赖，需要后端提供生成二维码和验证扫码状态的接口。

生成二维码

使用 qrcode 库生成登录二维码，需调用后端接口获取唯一标识（如 token）：

import QRCode from 'qrcode';

// 获取二维码数据
async function generateQR() {
  const res = await axios.get('/api/login/qrcode');
  const { token, url } = res.data;

  QRCode.toCanvas(document.getElementById('qrcode'), url, {
    width: 200,
    margin: 2
  });

  return token;
}

轮询扫码状态

通过定时器检查用户是否已扫码并确认登录：

let pollInterval;

function startPolling(token) {
  pollInterval = setInterval(async () => {
    const res = await axios.post('/api/login/check', { token });
    if (res.data.status === 'confirmed') {
      clearInterval(pollInterval);
      // 登录成功处理
      localStorage.setItem('userToken', res.data.authToken);
    }
  }, 2000); // 每2秒检查一次
}

生命周期管理

在 Vue 组件中控制轮询的启动和清理：

export default {
  data() {
    return {
      qrToken: null
    };
  },
  async mounted() {
    this.qrToken = await generateQR();
    startPolling(this.qrToken);
  },
  beforeUnmount() {
    clearInterval(pollInterval);
  }
};

后端接口要求

生成二维码接口 /api/login/qrcode
返回格式：

{
  "token": "唯一标识符",
  "url": "扫码跳转地址?token=xxx"
}

状态检查接口 /api/login/check
请求参数：

{ "token": "从二维码获取的token" }

响应状态：

// 待扫码
{ "status": "waiting" }

// 已扫码未确认
{ "status": "scanned" }

// 已确认登录
{ "status": "confirmed", "authToken": "JWT令牌" }

优化建议

添加二维码过期处理（后端需返回过期时间）
在二维码旁显示扫码状态提示（如文字或图标变化）
使用 WebSocket 替代轮询（适用于高实时性场景）

完整组件示例

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

<script>
export default {
  data() {
    return {
      statusText: '请扫码登录',
      pollInterval: null
    };
  },
  methods: {
    async checkStatus(token) {
      // 实现状态检查逻辑
    }
  },
  async mounted() {
    // 实现初始化逻辑
  },
  beforeUnmount() {
    clearInterval(this.pollInterval);
  }
};
</script>

vue扫码登录代码实现