En mi aplicación de reacción, mientras actualizo en las páginas que requieren iniciar sesión, me lleva a la página de inicio. La información de que alguien ha iniciado sesión se almacena en un estado que se actualiza en función del valor de autenticación verdadero/falso (que se almacena en el almacenamiento de sesiones). ¿Cómo puedo forzar la reacción al primer cambio de estado (su valor predeterminado es falso) antes de representar el componente?
const [loggedIn, setLoggedIn] = useState(false) const [user, setUser] = useState("temp"); Axios.defaults.withCredentials=true; useEffect(()=>{ Axios.get("http://localhost:3001/check") .then((response)=>{ sessionStorage.setItem('auth', JSON.stringify(response.data["Authorized"])); }); if(sessionStorage.getItem("auth")==="true"){ setLoggedIn(true) }else{ setLoggedIn(false) } }) return ( <> {loggedIn ? <LoggedInNavbar user={user} /> : <Navbar/>} <AnimatePresence> <Routes location={location} key={location.pathname}> <Route path="/" element={<Home/>}/> <Route path="/logowanie/:state" element={loggedIn ? <Navigate to="/"/> : <LogIn/>}/> <Route path="/rejestracja" element={loggedIn ? <Navigate to="/"/> : <SignUp/>}/> <Route path="/regulamin" element={<Rules/>}/> <Route path="/dashboard/:username" element={loggedIn ? <Dashboard user={user}/> : <Navigate to="/"/>}/> </Routes> </AnimatePresence> </> ) }```Veo dos problemas en tu código:
useEffect(()=>{ Axios.get("http://localhost:3001/check") .then((response)=>{ sessionStorage.setItem('auth', JSON.stringify(response.data["Authorized"])); }); // this part of code is executed BEFORE the Axios response // Axios.get is async and the `if` condition does not wait for // Axios response to be processed. if(sessionStorage.getItem("auth")==="true"){ setLoggedIn(true) }else{ setLoggedIn(false) } })El uso correcto de esto debería ser así:
useEffect(()=>{ Axios.get("http://localhost:3001/check") .then((response)=>{ sessionStorage.setItem('auth', JSON.stringify(response.data["Authorized"])); if(response.data["Authorized"])){ setLoggedIn(true) }else{ setLoggedIn(false) } }); }, []) // <-- attention, you have to give dependency list, // so this useEffect is used only on first render.Otro es el pilar principal de su problema:
<Route path="/dashboard/:username" element={loggedIn ? <Dashboard user={user}/> : <Navigate to="/"/>}/> No redirija al usuario, simplemente represente la ruta de Home , si el usuario no ha iniciado sesión.
<Route path="/dashboard/:username" element={loggedIn ? <Dashboard user={user}/> : <Home />}/> Con esta lógica, utilizará el estado de loggedIn de sesión de la manera adecuada: tan pronto como React se vuelva true en el estado de loggedIn de sesión, el usuario obtendrá el elemento Dashboard. (O puede llevarlo directamente al elemento de LogIn de sesión). Qué más: tan pronto como el usuario inicia sesión, vuelve a la ruta que estaba buscando anteriormente, porque permanece en la URL.