vue扫码登录代码实现
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>
