登录页面自动检查状态,未登录时才显示二维码区域

- 挂载时先 checkLoginCookie(轻量,不开浏览器)
- 有 cookie 则调 refreshStatus 验证实际状态,完成后标记 initialCheckDone
- 无 cookie 直接标记 initialCheckDone(确定未登录,无需开浏览器)
- 二维码登录卡片仅在 initialCheckDone=true 且未登录时渲染,检查期间不显示
This commit is contained in:
2026-03-01 23:14:41 +08:00
parent 56d5a6de96
commit ee154f990d
+56 -45
View File
@@ -14,14 +14,23 @@ export function LoginPage() {
const { token } = useAuth();
const { toast } = useToast();
// Whether the initial login check has completed (used to decide when to show QR section)
const [initialCheckDone, setInitialCheckDone] = useState(false);
// Auto-check cookie on mount (lightweight, no browser opened)
useEffect(() => {
if (!token) return;
void checkLoginCookie().then((res) => {
if (res.success && res.data?.hasCookies) {
void refreshStatus(); // Only open browser if cookies exist
// Cookies exist — open browser to verify actual login state
void refreshStatus().finally(() => setInitialCheckDone(true));
} else {
// No cookies — definitely not logged in, no need to open a browser
setInitialCheckDone(true);
}
}).catch(() => {});
}).catch(() => {
setInitialCheckDone(true);
});
}, [token, refreshStatus]);
const navigate = useNavigate();
@@ -167,53 +176,55 @@ export function LoginPage() {
</div>
</Card>
{/* QR Code Login */}
<Card>
<h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-4">
</h2>
{/* QR Code Login — only shown after check completes and user is not logged in */}
{token && initialCheckDone && !status?.loggedIn && (
<Card>
<h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-4">
</h2>
{!qrData && !qrLoading && (
<div className="text-center py-8">
<p className="text-dark-muted mb-4"></p>
<Button onClick={() => void handleGetQR()} disabled={status?.loggedIn}>
</Button>
</div>
)}
{qrLoading && (
<div className="flex flex-col items-center py-8 gap-3">
<Spinner size="lg" />
<p className="text-sm text-dark-muted">...</p>
</div>
)}
{qrData && (
<div className="flex flex-col items-center gap-4">
<div className="bg-white rounded-xl p-4">
<img src={qrData} alt="登录二维码" className="w-64 h-64" />
{!qrData && !qrLoading && (
<div className="text-center py-8">
<p className="text-dark-muted mb-4"></p>
<Button onClick={() => void handleGetQR()}>
</Button>
</div>
<p className="text-sm text-dark-muted">使 App </p>
{polling && (
<div className="flex items-center gap-3">
<Spinner size="sm" />
<span className="text-sm text-dark-accent">
... {formatCountdown(countdown)}
</span>
)}
{qrLoading && (
<div className="flex flex-col items-center py-8 gap-3">
<Spinner size="lg" />
<p className="text-sm text-dark-muted">...</p>
</div>
)}
{qrData && (
<div className="flex flex-col items-center gap-4">
<div className="bg-white rounded-xl p-4">
<img src={qrData} alt="登录二维码" className="w-64 h-64" />
</div>
<p className="text-sm text-dark-muted">使 App </p>
{polling && (
<div className="flex items-center gap-3">
<Spinner size="sm" />
<span className="text-sm text-dark-accent">
... {formatCountdown(countdown)}
</span>
</div>
)}
<div className="flex gap-2">
<Button variant="ghost" size="sm" onClick={() => void handleGetQR()}>
</Button>
<Button variant="ghost" size="sm" onClick={stopPolling}>
</Button>
</div>
)}
<div className="flex gap-2">
<Button variant="ghost" size="sm" onClick={() => void handleGetQR()}>
</Button>
<Button variant="ghost" size="sm" onClick={stopPolling}>
</Button>
</div>
</div>
)}
</Card>
)}
</Card>
)}
</div>
);
}