，将用户重定向到登录页。onAuthStateChanged的执行时机：onAuthStateChanged是一个异步操作，它会在用户认证状态发生变化时触发。将其直接放置在组件的函数体中，每次组件重新渲染时都会重新注册监听器（尽管Firebase内部会处理重复注册，但这并非最佳实践），更重要的是，它的回调执行是异步的。这意味着在回调执行并更新authorised状态之前，重定向已经发生。一旦重定向到/sign-in，PrivateRoute组件就不再挂载，因此即使onAuthStateChanged最终识别到用户已登录，也无法阻止已经发生的重定向。
简而言之，组件在不知道用户真实认证状态的情况下，根据其初始的false状态做出了重定向决策，从而引发了循环。
解决方案：引入useEffect和加载状态
要解决这个问题，我们需要确保在onAuthStateChanged完成其异步检查并确定用户的认证状态之前，不进行任何重定向。这可以通过引入一个“加载状态”（loading state）并结合useEffect钩子来实现。
核心思想：
加载状态： 在组件首次渲染时，设置一个loading状态为true，表示我们正在等待Firebase确认认证状态。useEffect封装监听： 使用useEffect钩子来订阅onAuthStateChanged事件。这确保了监听器只在组件挂载时注册一次，并在组件卸载时进行清理。状态更新： 在onAuthStateChanged的回调中，根据user对象的存在与否更新authorised状态，并在确定认证状态后，将loading状态设置为false。条件渲染：如果loading为true，则显示一个加载指示器（或者不渲染任何内容，等待状态确定）。如果loading为false：如果authorised为true，则渲染受保护的内容（）。如果authorised为false，则重定向到登录页面。
代码示例：重构后的PrivateRoute组件
以下是修正后的PrivateRoute组件代码，它遵循了上述最佳实践：
import { getAuth, onAuthStateChanged } from "firebase/auth";import { Navigate, Outlet } from "react-router-dom";import { useState, useEffect } from "react";const PrivateRoute = () => { const auth = getAuth(); const [authorised, setAuthorised] = useState(false); const [loading, setLoading] = useState(true); // 引入加载状态 useEffect(() => { // 订阅认证状态变化 const unsubscribe = onAuthStateChanged(auth, (user) => { if (user) { setAuthorised(true); } else { setAuthorised(false); } setLoading(false); // 认证状态确定后，设置加载为false }); // 清理函数：在组件卸载时取消订阅 return () => unsubscribe(); }, [auth]); // 依赖项数组，确保auth对象变化时重新订阅 if (loading) { // 在等待认证状态时，可以显示加载指示器或返回null return Loading authentication...; } // 根据最终的认证状态进行渲染 return authorised ? : ;};export default PrivateRoute;
关键改进点：
useState(true) for loading: 确保在Firebase认证状态未确定前，组件处于加载状态。useEffect: 将onAuthStateChanged放入useEffect中，确保它只在组件挂载时执行一次，并在组件卸载时正确清理订阅，避免内存泄漏。setLoading(false): 在onAuthStateChanged的回调中，无论用户是否登录，一旦状态被确认，就将loading设置为false。if (loading) 检查： 在认证状态未确定时，显示一个加载提示，避免立即重定向。replace prop for Navigate: 在重定向时使用replace属性，可以防止用户在未登录状态下通过浏览器后退按钮返回受保护页面。
集成到React应用
App.js中的路由配置保持不变，因为它已经正确地使用了嵌套路由来保护/profile路径。
import { Route, Routes } from "react-router-dom";import Profile from "./pages/Profile";import SignIn from "./pages/SignIn"; // 假设你有一个SignIn组件import PrivateRoute from "./components/PrivateRoute"; // 导入修正后的PrivateRoutefunction App() { return ( {/* 使用包裹所有 */} <Route path="/sign-in" element={} /> <Route element={}> <Route path="/profile" element={} /> {/* 其他路由 */} );}export default App;
最佳实践与注意事项
用户体验：加载指示器当loading为true时，显示一个友好的加载指示器（如加载动画或骨架屏），可以显著提升用户体验，避免页面突然空白或闪烁。
Auth Context API：对于更复杂的应用，建议将Firebase认证状态（user对象和loading状态）提升到React Context中。这样，任何组件都可以轻松访问用户的认证信息，而无需在每个PrivateRoute中重复订阅onAuthStateChanged。
// 示例：AuthContext.jsimport React, { createContext, useContext, useState, useEffect } from 'react';import { getAuth, onAuthStateChanged } from 'firebase/auth';const AuthContext = createContext();export const AuthProvider = ({ children }) => { const [currentUser, setCurrentUser] = useState(null); const [loading, setLoading] = useState(true); const auth = getAuth(); useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (user) => { setCurrentUser(user); setLoading(false); }); return unsubscribe; }, [auth]); return ( {!loading && children} {/* 确保在加载完成后才渲染子组件 */} );};export const useAuth = () => useContext(AuthContext);// 在PrivateRoute中使用// const { currentUser, loading } = useAuth();// if (loading) return Loading...;// return currentUser ? : ;
错误处理：在实际应用中，你可能还需要考虑Firebase认证过程中可能出现的错误，例如网络问题或无效凭据。在onAuthStateChanged之外，处理登录、注册等操作时，应包含适当的错误捕获和用户反馈机制。
总结
通过将Firebase onAuthStateChanged监听器封装在useEffect钩子中，并引入一个loading状态来管理异步认证流程，我们成功解决了React受保护路由中的无限重定向问题。这种模式确保了在用户认证状态明确之前，组件不会做出错误的重定向决策，从而构建出更健壮、用户体验更好的React应用。遵循这些最佳实践，可以有效避免异步操作在React组件生命周期中引发的常见陷阱。
以上就是避免React中Firebase认证保护路由的无限重定向的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519820.html
微信扫一扫 
支付宝扫一扫 
