React-Firebase路由和身份驗證方法

我想學習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;

標籤：

上一篇：使用自定義標頭和OIDC令牌調度GoogleCloudFunction

下一篇：使用ingress-nginx重定向所有內容