Блог

Когда я вхожу на страницу и обновляю страницу, она возвращает меня на страницу входа. Я хочу, чтобы при аутентификации пользователя он все равно переходил со страницы входа на домашнюю страницу, а не наоборот, и оставался на домашней странице, даже если страница обновляется.

Это мое app.js:

 import React from "react" import { BrowserRouter, Routes, Route, Navigate, useLocation } from "react-router-dom"  import AuthContextProvider from "../Contexts/AuthContext" import { useAuth } from "../Contexts/AuthContext"  import Login from "../Pages/Authentication/Login" import Home from "../Pages/Home"  const App = () =gt; {  return (  lt;AuthContextProvidergt;  lt;BrowserRoutergt;  lt;Routesgt;  lt;Route path="/login" element={lt;Login /gt;} /gt;  lt;Route  path="/home"  element={  lt;RequireAuthgt;  lt;Home /gt;  lt;/RequireAuthgt;  }  /gt;  lt;/Routesgt;  lt;/BrowserRoutergt;  lt;/AuthContextProvidergt;  ) }  function RequireAuth({ children }) {  const { currentUser } = useAuth()  return currentUser ? children : lt;Navigate to="/login" replace /gt; }  export default App   

это мой аутентификационный контекст:

 import React, { createContext, useContext, useEffect, useState } from "react" import { auth } from "../firebase/Firebase-config" import {  signInWithEmailAndPassword,  onAuthStateChanged,  signOut, } from "firebase/auth"  const AuthContext = createContext({  currentUser: null,  login: () =gt; Promise,  logout: () =gt; Promise, })  export const useAuth = () =gt; useContext(AuthContext)  export default function AuthContextProvider({ children }) {  const [currentUser, setCurrentUser] = useState(null)   useEffect(() =gt; {  const unsubscribe = onAuthStateChanged(auth, (user) =gt; {  setCurrentUser(user ? user : null)  })  return () =gt; {  unsubscribe()  }  }, [])   useEffect(() =gt; {  console.log("The user is", currentUser)  }, [currentUser])   function login(email, password) {  return signInWithEmailAndPassword(auth, email, password)  }   function logout() {  return signOut(auth)  }   const value = {  currentUser,  login,  logout,  }  return lt;AuthContext.Provider value={value}gt;{children}lt;/AuthContext.Providergt; }   

это то, что возвращает контекст аутентификации

вы можете использовать undefined состояние, если хотите.

 const [currentUser, setCurrentUser] = useState(undefined)  

чем будут возможные состояния currentUser undefined null , или user то , и вы можете проверить это. По умолчанию это будет undefined так, просто перейдите, если это так null .

 function RequireAuth({ children }) {  const { currentUser } = useAuth()  if(currentUser) {  return children;  }  if(currentUser === null) {  return lt;Navigate to="/login" replace /gt;;  }  return null; }  

Вы сохраняете своего пользователя в состоянии, вот почему. Когда вы обновите страницу, все вернется к своему первоначальному значению. Вам действительно необходимо использовать файлы cookie или локальное хранилище с состоянием для хранения необходимой информации.