vue实现扫描登录
Vue 实现扫描登录功能
扫描登录通常涉及生成二维码、轮询验证和状态更新。以下是基于 Vue 的实现方案：
生成二维码
使用第三方库如 qrcode 生成登录二维码。后端需提供一个带唯一标识的接口，前端将接口返回的标识编码为二维码。
import QRCode from 'qrcode';
// 获取后端生成的临时token
const getTempToken = async () => {
const res = await axios.get('/api/login/qrcode');
return res.data.token;
};
// 生成二维码图片
const generateQRCode = async (el, token) => {
const url = `${location.origin}/api/login/confirm?token=${token}`;
await QRCode.toCanvas(el, url, { width: 200 });
};轮询验证状态
通过定时器检查二维码状态，使用 setInterval 或 WebSocket 实现轮询。
// 轮询检查登录状态
const checkStatus = (token) => {
const timer = setInterval(async () => {
const res = await axios.get(`/api/login/check?token=${token}`);
if (res.data.status === 'confirmed') {
clearInterval(timer);
// 登录成功处理
}
}, 2000);
};状态更新与交互
根据轮询结果更新 UI 状态，例如二维码过期或已扫描状态。
<template>
<div>
<canvas ref="qrcode"></canvas>
<p v-if="status === 'pending'">请扫码登录</p>
<p v-if="status === 'expired'">二维码已过期</p>
<p v-if="status === 'confirmed'">登录成功</p>
</div>
</template>
<script>
export default {
data() {
return {
status: 'pending'
};
},
async mounted() {
const token = await getTempToken();
await generateQRCode(this.$refs.qrcode, token);
checkStatus(token);
}
};
</script>安全性增强
- 设置二维码有效期（如 2 分钟），后端需验证时间戳。
- 使用一次性 token，避免重复使用。
- 敏感操作需二次确认（如手机号验证）。
后端接口设计示例
/api/login/qrcode：生成临时 token 和二维码内容。/api/login/check：检查 token 是否被扫描确认。/api/login/confirm：移动端调用的确认接口。
移动端适配
确保生成的二维码 URL 能唤醒 App 或跳转 H5 确认页。深层链接（Deep Link）或 Universal Link 可实现无缝跳转。
