反應UseContext最新值

我有一個用于身份驗證的反應 firebase 應用程式。我正在使用 Usecontext 和 setState。你可以看到下面的代碼。當用戶第一次登錄或注冊時，此場景作業正常。但是，一旦我重新加載，背景關系值就會在一瞬間為空，然后它會從 firebase 的身份驗證中獲取最新值。即使用戶已登錄，這也會導致我無法訪問私有路由。

AuthContext.js檔案

import React, { useContext, useEffect, useState } from "react";
import { firebaseAuth } from "../firebase";
import {
  createUserWithEmailAndPassword,
  signOut,
  signInWithEmailAndPassword,
  onAuthStateChanged,
} from "firebase/auth";

const AuthContext = React.createContext();

export const useAuth = () => {
  return useContext(AuthContext);
};

export const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  console.log("Auth Context User:", user);

  useEffect(() => {
    const unsub = onAuthStateChanged(firebaseAuth, (user) => {
      setUser(user);
    });
    return unsub();
  }, [user]);

  function SignUp(email, password) {
    return createUserWithEmailAndPassword(firebaseAuth, email, password);
  }

  function Logout() {
    return signOut(firebaseAuth);
  }

  function Login(email, password) {
    return signInWithEmailAndPassword(firebaseAuth, email, password);
  }

  const value = {
    logout: Logout,
    signup: SignUp,
    login: Login,
    user,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

App.js檔案

import Header from "./components/Header";
import Login from "./components/Login";
import NotFound from "./components/NotFound";
import Signup from "./components/Signup";
import Home from "./components/Home";
import AuthGuard from "./guard/AuthGuard";
import ErrorComp from "./components/ErrorComp";

import { AuthContextProvider } from "./context/AuthContext";

import { GlobalStyles } from "./styledComps/Global";
import { Route, Routes } from "react-router-dom";

function App() {
  return (
    <>
      <GlobalStyles />
      <AuthContextProvider>
        <Header />
        <ErrorComp>
          <Routes>
            <Route path="" element={<Login />} exact />
            <Route path="/signup" element={<Signup />} />
            <Route
              path="/home"
              element={
                <AuthGuard>
                  <Home />
                </AuthGuard>
              }
            />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </ErrorComp>
      </AuthContextProvider>
    </>
  );
}

export default App;

AuthGuard.js檔案

import React from "react";
import { Navigate, useLocation } from "react-router-dom";
import { useAuth } from "../context/AuthContext";

const AuthGuard = ({ children }) => {
  let { user } = useAuth();
  let location = useLocation();

  console.log("user", user);

  if (!user) {
    return <Navigate to="/" state={{ from: location }} />;
  }

  return children;
};

export default AuthGuard;

uj5u.com熱心網友回復：

由于用戶在重新加載時必須重新獲取（這需要一些時間），因此用戶物件將在null該程序完成之前一直存在。您可以簡單地嘗試通過以下方式保護您的渲染

export const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  console.log("Auth Context User:", user);

  useEffect(() => {
    const unsub = onAuthStateChanged(firebaseAuth, (user) => {
      setUser(user);
    });
    return unsub();
  }, [user]);

  function SignUp(email, password) {
    return createUserWithEmailAndPassword(firebaseAuth, email, password);
  }

  function Logout() {
    return signOut(firebaseAuth);
  }

  function Login(email, password) {
    return signInWithEmailAndPassword(firebaseAuth, email, password);
  }

  const value = {
    logout: Logout,
    signup: SignUp,
    login: Login,
    user,
  };

  if ( user !== null ) {
    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
  }

  return <>Loading ... or render eg. a spinner</>

};

標籤：反应 火力基地 firebase-身份验证 使用上下文

上一篇：動態構建Firebase查詢

下一篇：如何為Firebase(Kotlin)創建自定義身份驗證