如何在React组件中使用Firebase保留验证状态

Question

我有一个firebase onauthstatechange和一组私人路由，可以

    useEffect(() => {
    const fetchData = async () =>
      await auth.onAuthStateChanged(async authUser => {
        console.log('here in authuser')
        if (authUser) {
          await dispatch(setUser('SET_USER', authUser))
        } else {
          await dispatch(setUser('SET_USER', null))
        }
      })
    fetchData()
  }, [])

    <Route path='/' element={<PrivateRoute user={users} />}>
            <Route path='/courses/:id' element={<CourseDetails />} />
            <Route
              path='/'
              element={<Courses emailId={users?.user?.email} />}
            />
            <Route path='/enrolled' element={<Enrolled />} />
            <Route path='/authored' element={<Authored />} />
            <Route path='/users' element={<Users />} />
          </Route>

在受保护的路由组件中使用React Router V6渲染的私人路线，我正在检查用户是否为null，然后重定向用户登录页面，以其他求孩子。

if (user === null || user.user === null) {
    console.log('Entered!!!!!')
    return <Navigate to='/login' replace />
  } else {
    return children ? children : <Outlet />
  }

在刷新页面上，如果我还登录，我也将重定向到登录路线，因为Onauthstatechange尚未完成执行。因此，用户在

处理这种情况的正确方法中是无效的，并确保用户被导航到重新加载的同一页面。

Answer 1

您可以创建一个为您处理支票的组件。

因此，在您的路线中，您将Privateroute与您的路由组件包装：

<Route path='/courses/:id' element={<PrivateRoute><CourseDetails /></PrivateRoute> } />

因此，该组件的作用是检查用户是否是eulteded。如果是授权，它将渲染您的路由的子组件。如果不是，它将将您重定向到/login

他们在 docs

const PrivateRoute =({ children }: { children: JSX.Element }) =>  {
  let auth = useAuth();
  let location = useLocation();

  if (!auth.user) {
    // Redirect them to the /login page, but save the current location they were
    // trying to go to when they were redirected. This allows us to send them
    // along to that page after they login, which is a nicer user experience
    // than dropping them off on the home page.
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
}