<p>为仪表板页面创建了一个PrivateRoute，未登录时无法通过URL访问，但刷新仪表板页面会导致重定向到身份验证页面。因此，我添加了一个sessionStorage，但是现在刷新时在我的控制台上显示"throttling navigation to prevent the browser from hanging"，因为它一直在不停地重定向到页面。</p>
<p>//以下是代码</p>
<p>//App.js</p>
<pre class="brush:php;toolbar:false;">从“react-router-dom”导入 { BrowserRouter as Router, Routes, Route };
从“./components/dashboard”导入仪表板；
从“./components/auth”导入Auth；
从“./PrivateRoute”导入PrivateRoute；
函数应用程序（）{
返回 （
<路由器>
<路线>
} />;
<路线
路径=“/仪表板”
元素={<PrivateRoute> <仪表板/>}
>>
</路线>
</路由器>
）；
}
导出默认应用程序；</pre>
<p>//PrivateRoute.js</p>
<pre class="brush:php;toolbar:false;">从“react-router-dom”导入 { Navigate };
从“./config/firebase”导入{auth}；
函数 PrivateRoute({ 孩子 }) {
const 用户 = auth.currentUser;
// 检查用户是否已经通过身份验证
如果（！用户）{
// 用户未通过身份验证，重定向到登录页面
return <导航到=“/signin”替换/>;
}
// 用户已通过身份验证，渲染受保护的路由
返回儿童；
}
导出默认 PrivateRoute;</pre>
<p>//Auth.js</p>
<pre class="brush:php;toolbar:false;">从“react”导入 { useEffect, useState };
从“react-router-dom”导入{useNavigate}；
从“../config/firebase”导入 { auth, googleProvider }；
进口 {
创建用户与电子邮件和密码，
使用弹出窗口登录，
登出，
来自“firebase/auth”；
函数验证（）{
const [电子邮件，setEmail] = useState("");
const [密码，setPassword] = useState("");
常量导航 = useNavigate();
console.log(auth?.currentUser?.email);
useEffect(()=> {
const userFromStorage = JSON.parse(sessionStorage.getItem("用户"));
如果（用户来自存储）{
console.log(userFromStorage);
导航（“/仪表板”）；
}
} , [导航]);
const signIn = async () =>; {
尝试 {
等待 createUserWithEmailAndPassword(身份验证、电子邮件、密码);
sessionStorage.setItem("用户" , JSON.stringify(auth.currentUser));
导航（“/仪表板”）；
} 捕获（错误）{
控制台.错误（错误）；
}
};
const signInWithGoogle = async () =>; {
尝试 {
等待signInWithPopup(auth, googleProvider);
sessionStorage.setItem("用户", JSON.stringify(auth.currentUser));
导航（“./仪表板”）；
}catch (err) {
console.error(err);
}
};
const Logout = async () => {
try {
await signOut(auth);
sessionStorage.removeItem("user");
} catch (err) {
console.error(err);
}
};
return (
<div>
<input placeholder="email" onChange={(e) => setEmail(e.target.value)} />
<input
type="password"
placeholder="password"
onChange={(e) => setPassword(e.target.value)}
/>
<button onClick={signIn}>sign in</button>
<button onClick={signInWithGoogle}>sign in with Google</button>
<button onClick={Logout}>Logout</button>
</div>
);
};
export default Auth;</pre>
<p>不想要这个错误，作为一个初学者，如果有改进的空间，请随时告诉我。</p>
您应该异步处理身份验证状态。
import { useEffect, useState } from 'react'; import { Navigate } from 'react-router-dom'; import { auth } from './config/firebase'; function PrivateRoute({ children }) { const [isAuthenticated, setIsAuthenticated] = useState(false); const [loading, setLoading] = useState(true); useEffect(() => { // 观察用户身份验证变化 const unsubscribe = auth.onAuthStateChanged((user) => { if (user) { setIsAuthenticated(true); } else { setIsAuthenticated(false); } setLoading(false); }); // 当组件卸载时取消订阅 return () => unsubscribe(); }, []); if (loading) return <div>加载中...</div>; // 可选的加载指示器 if (!isAuthenticated) { return <Navigate to="/signin" replace />; } return children; } export default PrivateRoute;