react实现扫码登录
React 实现扫码登录方案
扫码登录通常基于 WebSocket 或轮询机制实现，以下是具体实现步骤和代码示例。
准备工作
确保项目已安装必要依赖：
npm install qrcode.react axios生成二维码
使用 qrcode.react 库生成包含服务端返回的 token 的二维码：
import QRCode from 'qrcode.react';
function LoginQRCode({ token }) {
return <QRCode value={token} size={200} />;
}服务端交互流程
-
前端请求生成二维码的 token
const getToken = async () => { const res = await axios.get('/api/qrcode/token'); return res.data.token; }; -
轮询检查扫码状态
const checkScanStatus = async (token) => { const res = await axios.get(`/api/qrcode/check?token=${token}`); return res.data.status; // 'pending'|'scanned'|'confirmed' };
完整组件实现
import { useEffect, useState } from 'react';
function QRLogin() {
const [token, setToken] = useState('');
const [status, setStatus] = useState('init');
useEffect(() => {
const initQRCode = async () => {
const newToken = await getToken();
setToken(newToken);
setStatus('pending');
const timer = setInterval(async () => {
const currentStatus = await checkScanStatus(newToken);
setStatus(currentStatus);
if (currentStatus === 'confirmed') {
clearInterval(timer);
// 登录成功处理
}
}, 2000);
};
initQRCode();
}, []);
return (
<div>
{status === 'pending' && <QRCode token={token} />}
{status === 'scanned' && <p>请确认登录</p>}
{status === 'confirmed' && <p>登录成功</p>}
</div>
);
}服务端关键逻辑
- 生成随机 token 并设置过期时间
- 手机端扫码后关联用户信息与 token
- 电脑端轮询时返回扫码状态变化
安全注意事项
- Token 应设置合理有效期（建议 2-5 分钟）
- 采用 HTTPS 协议传输
- 服务端需验证手机端请求来源合法性
- 扫码确认操作需二次验证（如指纹/密码）
优化方向
- 使用 WebSocket 替代轮询减少请求次数
- 添加扫码成功音效/震动反馈
- 实现自动跳转而非手动刷新
以上方案适用于大多数扫码登录场景，可根据实际需求调整交互细节。
