本文介绍如何在 react 单页应用（spa）首次加载时，通过 useeffect 和 fetch 自动请求后端登录验证接口，并在数据返回后条件渲染模态框组件，兼顾健壮性与用户体验。
本文介绍如何在 react 单页应用（spa）首次加载时，通过 useeffect 和 fetch 自动请求后端登录验证接口，并在数据返回后条件渲染模态框组件，兼顾健壮性与用户体验。
在构建需要服务端身份校验的前端应用时，一个常见需求是：SPA 启动即向后端（例如 Java Spring Boot 提供的 /api/auth/verify 接口）发起一次初始认证请求，根据响应结果决定是否显示登录成功提示、权限模态框或跳转至主界面。这要求逻辑既可靠（避免竞态、空状态报错），又具备良好的用户反馈。
以下是一个简洁、可复用的实现方案：
import { useState, useEffect } from 'react';
function AuthVerificationModal() {
const [data, setData] = useState<{
authenticated: boolean;
username?: string;
role?: string;
} | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const verifyAuth = async () => {
try {
const response = await fetch('/api/auth/verify', {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
// 若需携带 token（如存于 localStorage），请添加：
// credentials: 'include', // 支持 Cookie
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const result = await response.json();
setData(result);
} catch (err) {
console.error('Authentication check failed:', err);
setError(err instanceof Error ? err.message : 'Unknown error');
} finally {
setLoading(false);
}
};
verifyAuth();
}, []); // 空依赖数组确保仅在挂载时执行
// 加载中：可选显示骨架屏或 loading 指示器
if (loading) return <div className="loading">Verifying session...</div>;
// 请求失败：提供重试机制更佳（此处简化）
if (error) return <div className="error">Auth check failed: {error}</div>;
// 成功且有数据时才渲染模态框
return data?.authenticated ? (
<Modal
title="Login Verified"
message={`Welcome back, ${data.username}!`}
role={data.role}
/>
) : (
<Modal
title="Session Expired"
message="Please log in again to continue."
showLoginButton
/>
);
}
// 示例 Modal 组件（可根据 UI 库如 Mantine/Ant Design 替换）
function Modal({ title, message, role, showLoginButton }: {
title: string;
message: string;
role?: string;
showLoginButton?: boolean;
}) {
return (
<div className="modal-overlay">
<div className="modal-content">
<h3>{title}</h3>
<p>{message}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2385" title="造次"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/176317700859328.png" alt="造次" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2385" title="造次">造次</a>
<p>Liblib打造的AI原创IP视频创作社区</p>
</div>
<a href="/ai/2385" title="造次" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
{role && <small>Role: {role}</small>}
{showLoginButton && (
<button onClick={() => window.location.href = '/login'}>
Go to Login
</button>
)}
</div>
</div>
);
}关键要点说明：
- ✅ 仅挂载时调用：useEffect 的空依赖数组 [] 保证请求只在组件首次渲染后触发，符合“初始加载”语义；
- ✅ 状态分层管理：区分 loading、data、error 三种状态，避免未定义访问和 UI 闪烁；
- ✅ 错误防御：检查 response.ok 并捕获网络/解析异常，防止白屏；
- ✅ 安全建议：生产环境应启用 credentials: 'include'（若使用 Session Cookie）或手动注入 Bearer Token；
- ⚠️ 注意副作用：避免在 useEffect 中直接修改 DOM 或触发非幂等操作；如需重试逻辑，可封装 useAsync 自定义 Hook。
该模式可轻松扩展为全局认证守卫（配合 React Router v6 的 loader 或 useNavigate 重定向），是构建企业级 React 应用认证流程的基础范式。
