Tengo una página de registro en reacción en la que, después de registrarse, el usuario es redirigido a la página de inicio. Quiero que mi página de inicio sea una ruta protegida donde solo los usuarios registrados pueden ingresar.
Mi código para registrarse:
const navigate = useNavigate(); const handleSignup = (e) => { e.preventDefault(); const email = document.querySelector('#email').value; const password = document.querySelector('#password').value; createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; console.log(user); setcurrentuser(user); setTimeout(()=>{ navigate('/homepage'); },3000); }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. }); }después de recibir el objeto de usuario de firebase, configuré el estado para el usuario y, como el estado tarda en actualizarse, usé un tiempo de espera de 3 segundos para navegar a la página de inicio. Aun así, cuando registro el objeto de usuario, no estoy definido.
Código para la página de inicio:
const Homepage = ({user,username,setusername}) => { console.log(user); const navigate=useNavigate(); // useEffect(()=>{ // if(user=={} || !user) // navigate('/signup'); // }) return( <> ...some code here </>)} export default HomePageEl estado está en el componente de la aplicación y el componente de registro establece el estado para el objeto de usuario usando los apoyos que recibe. La página de inicio obtiene los accesorios del componente de la aplicación.
La mejor manera de hacerlo es usar useContext en lugar de props. Como es más fácil y más eficiente. Aquí hay un enlace a una documentación para ayudarlo. Visite https://betterprogramming.pub/react-hooks-and-forms-dedb8072763a
De acuerdo, en primer lugar, para no quedar indefinido o nulo en esa página de Homepage protegida, necesita alguna forma de acceder a los datos de un usuario, los que se obtienen después de iniciar sesión,
y el principal buen lugar para almacenarlos para que sean accesibles en todo el sitio es localStorage con este código y una vez que navegue a la página de Homepage , irá a tomar su usuario almacenado en su localStorage
Nota 1 : localStorage almacena datos primitivos sin problemas, pero los objetos deben clasificarse primero, lo abordaremos pronto.
Nota 2: esperar 3 segundos para navegar a otra página es una gran cantidad de tiempo en la experiencia del usuario, no sugeriré que, si desea esperar a que ocurra algún evento para desencadenar otro evento y no tiene otra forma, puede usar El truco del bucle de eventos javascript's de cero segundos que coloca la función/evento necesario para esperar justo en el nextTick del bucle de eventos. que se hace escribiendo
setTimeout(()=>{ navigate('/homepage'); },0); //Note that 0 second, that will place navigation on nextTick of eventLoopAhora, si Note2 es confuso, simplemente no se preocupe, pasemos a su problema,
Inscribirse:
const navigate = useNavigate(); const handleSignup = (e) => { e.preventDefault(); const email = document.querySelector('#email').value; const password = document.querySelector('#password').value; createUserWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; console.log(user); //Edited place if(user){ //check if we got user object right localStorage.setItem('user',JSON.stringify(user));//store in global storage navigate('/homepage');//let go to homepage :) }//End of Edited }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. }); }Justo en el área de la página de inicio
const Homepage = () => { //console.log(user);This wont give you your user so just remove it from the props above const navigate=useNavigate(); useEffect(()=>{ let user = localStorage.getItem('user'); if(user){ //then we have user //bring her up from object stringifying.. user = JSON.parse(user); //get her details if needed const {username, email,...} = user }else{ //not signed so go back navigate('/signup'); } }) return( <> ...some code here </>) } export default HomePage