onAuthStateChanged 应用程序刷新时的 Firebase 侦听器导致私有路由问题

Question

我目前已经使用 firebase 初始化了一个 React 应用程序。在应用程序中，我使用react-router-dom创建了一个开放的登录路由和一个私有的Home路由。我的 app.js 看起来像这样：应用程序.js：import React from 'react'import { BrowserRouter, Switch, Route } from 'react-router-dom'import Login from './pages/Login'import Home from './pages/Home'import PrivateRoute from './utils/PrivateRoute'const App = () => {  return (    <BrowserRouter>      <Switch>        <PrivateRoute exact path='/' component={Home} />        <Route path='/login' component={Login} />      </Switch>    </BrowserRouter>  )}export default App我使用 onAuthStateChanged firebase 事件监听器将 currentUser 存储在上下文中，如下所示：应用程序上下文：import { useEffect, useState, createContext } from 'react'import { auth } from '../utils/firebase'export const AppContext = createContext()export const AppProvider = ({ children }) => {  const [currentUser, setCurrentUser] = useState(null)  useEffect(() => {    auth.onAuthStateChanged(setCurrentUser)  }, [])  return (    <AppContext.Provider value={{ currentUser }}>      {children}    </AppContext.Provider>  )}我遇到的问题是，当应用程序刷新时，currentUser 最初变为 null，然后 currentUser 的信息会重新加载。当刷新时 currentUser 为 null 时，用户将从主路由中踢出并重定向到登录页面。我想知道是否有人对如何防止这种情况发生有任何建议。

Answer 1

您使用currentUser空值初始化状态变量：

const [currentUser, setCurrentUser] = useState(null)

这意味着currentUser当页面首次加载时，它最初总是为空。之前的用户对象只有在 Firebase SDK 异步加载一段时间后才能确定。您的代码需要为此做好准备。如果您要求用户在渲染组件之前登录，则应该等待onAuthStateChanged实际用户对象的首次触发。