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实际用户对象的首次触发。