我想学习firebase路由认证的正确方法，我的意思是：

function App() {
  const auth = getAuth();

  if (!auth) {
    <Spinner />;
  }

  return (
    <>
      {auth && (
        <Router>
          <Routes>
            <Route path='/' element={<PrivateRoute />}>
              <Route index element={<Explore />} />
              <Route path='/offer' element={<Offers />} />
              <Route path='/profile' element={<Profile />} />
            </Route>
            <Route path='/sign-in' element={<SignIn />} />
            <Route path='/sign-up' element={<SignUp />} />
            <Route path='/forgot-password' element={<ForgotPassword />} />
          </Routes>
          <Navbar />
        </Router>
      )}

我有这个代码块，起初我认为我应该得到一个使用onAuthStateChanged的useAuth钩子，但我意识到这个来自 getAuth 的auth变量的作业方式是一样的，所以为什么不使用它而不是钩子呢？

我的PrivateRoute看起来像这样：

function PrivateRoute() {
  const currentUser = getAuth().currentUser;

  return currentUser ? <Outlet /> : <Navigate to='/sign-in' />;
}

问题是一旦应用程序挂载，由于没有应用程序级状态，它保持不变。

然后，如果我尝试注销并将一些逻辑放入路由中，例如如果用户存在，则不允许路由注册或登录，它不起作用。

如果我使用 redux 或 context API，我会在登录、注销、注册时调度，但没有它们，处理这种路由的正确设定是什么？

uj5u.com热心网友回复：

一段时间后，我只是想出了如何做我需要做的事情，所以我把它贴在这里以防万一有人也遇到这个问题并寻求帮助。

如果你不使用 redux 或 context api 并且仍然想实作这种功能，我是这样做的：

那么我需要做什么？我想通过 firebase 进行身份验证，您需要做的 - 至少我发现的 - 实作APP/LEVEL/STATE以检查用户是否登录并更新应用级别渲染，从而呈现整个应用并强制执行行为因此。

所以：

function App() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setIsLoading(true);

      if (user) {
        setUser(user);
      } else {
        setUser(null);
      }

      setIsLoading(false);
    });

    return unsubscribe;
  }, []);

  if (isLoading) return <Spinner />;

  return (
    <>
      <Router>
        <Routes>
          <Route path='/' element={<PrivateRoute user={user} />}>
            <Route index element={<Explore />} />
            <Route path='/offers' element={<Offers />} />
            <Route path='/profile' element={<Profile />} />
            <Route path='/create-listing' element={<CreateListing />} />
            <Route path='/category/:categoryName' element={<Category />} />
          </Route>
          <Route
            path='/sign-in'
            element={!user ? <SignIn /> : <Navigate to='/' />}
          />
          <Route
            path='/sign-up'
            element={!user ? <SignUp /> : <Navigate to='/' />}
          />
          <Route
            path='/forgot-password'
            element={!user ? <ForgotPassword /> : <Navigate to='/' />}
          />
        </Routes>
        <Navbar />
      </Router>

      <ToastContainer autoClose={1000} />
    </>
  );
}

export default App;

在这里，基本上在组件挂载之后，我们希望 useEffect 只执行一次并设定监听器以更改身份验证状态，每当身份验证状态发生更改（例如登录或注销）时，onAuthStateChanged 的??代码块就会运行，并且当它运行时，每次它设定用户是否有，因此重新渲染 App 本身的组件，并在路由下方相应地作业。如果您像我一样有私人路线，则可以将用户作为道具传递，然后：

import { Navigate, Outlet } from 'react-router-dom';

function PrivateRoute({ user }) {
  return user ? <Outlet /> : <Navigate to='/sign-in' />;
}

export default PrivateRoute;