Tengo un problema con mi código actual. Se supone que el siguiente código toma una respuesta JSON de mi backend y establece "datos" en la función useState en verdadero o falso según la respuesta del backend. El problema que tengo es que cuando hago clic en mi botón para redirigirme a la página, primero debe pasar por esta ruta protegida en mi enrutador de reacción. Entonces ejecutará este script pero el valor de 'datos' nunca cambia. Sin embargo, mi console.log generará el valor booleano correcto en función de la respuesta JSON enviada desde el backend. Estoy confundido sobre cómo puedo obtener mi respuesta JSON en la carga de la página y configurarla en 'datos' con useEffect. Según tengo entendido, useEffect solo actualizará mis 'datos' de useState cuando el DOM se vuelva a procesar.
En resumen, quiero que los datos sean = verdaderos en la representación de la página al verificar la respuesta JSON de mi backend usando axios y, si es cierto, quiero ser redirigido a la salida.
Agradezco cualquier ayuda gracias.
const useAuth = () => { const [data, setData] = useState(false); useEffect(() => { const fetchAuthData = async () => { await axios.get('http://localhost:5000/auth') .then(resp => { console.log(resp.data) setData(resp.data); }) .catch(err => { console.log(err); setData(false) }); }; fetchAuthData() }, []); console.log(data) // Logic to check if backEndResponse is true or false if (data === true) { const authorized = { loggedIn: true } return authorized && authorized.loggedIn; } else { const authorized = { loggedIn: false } return authorized && authorized.loggedIn; } }; const ProtectedRoutes = () => { const isAuth = useAuth(); return isAuth ? <Outlet/> : <Navigate to="/login" />; }Ok, por lo que puedo entender de su pregunta, el problema es que el componente de diseño de ProtectedRoutes está usando el estado data inicial, que es false , y maneja la redirección de autenticación antes de que la solicitud GET de autenticación real se procese por completo.
Debe usar un tercer estado "indeterminado" para posponer la representación de Outlet o redirigir hasta que se confirme el estado de autenticación.
Ejemplo:
const useAuth = () => { const [data, setData] = useState(); // <-- initially undefined useEffect(() => { const fetchAuthData = async () => { await axios.get('http://localhost:5000/auth') .then(resp => { setData(!!resp.data); }) .catch(err => { console.log(err); setData(false) }); }; fetchAuthData() }, []); return data; };...
const ProtectedRoutes = () => { const isAuth = useAuth(); if (isAuth === undefined) return null; // or loading indicator, etc... return isAuth ? <Outlet/> : <Navigate to="/login" replace />; }