es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Página de inicio de sesión no redirige a la página de inicio correctamente después de iniciar sesión con éxito.

Página de inicio de sesión no redirige a la página de inicio correctamente después de iniciar sesión con éxito.

19 Jul, 2023 Programación

Estoy usando aws amplify para la autenticación.
Al hacer clic en login, Auth.currentAuthenticatedUser() devuelve true pero la página se redirige a la página de inicio, al hacer clic en refrescar se redirige a la página de inicio y funciona correctamente.

Aquí está el código

Home.js

function Home(props) {
  const [auth, setAuth] = useState();

  async function isAuthenticated() {
    try {
      let res = await Auth.currentAuthenticatedUser();
      console.log(res);
      setAuth(true);
    } catch {
      setAuth(false);
      console.log("error");
    }
  }
  useEffect(() => {
    isAuthenticated();
  }, [auth]);

  console.log(auth);
  return false ? (
    <div classname="c-app c-default-layout">
      <sidebar></sidebar>
      <div classname="c-wrapper">
        <header {...props}=""></header>
        <div classname="c-body">
          <content></content>
        </div>
        <footer></footer>
      </div>
    </div>
  ) : (
    <redirect to="/login"></redirect>
  );
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    El problema aquí parece estar relacionado con la forma en que se utiliza el hook useEffect. Cada vez que cambia el estado de auth, se llama de nuevo a la función isAuthenticated, que a su vez llama de nuevo a Auth.currentAuthenticatedUser(). Esto puede generar un ciclo infinito si el estado no se gestiona correctamente.

    Para solucionar este problema, podemos eliminar la dependencia de auth del hook useEffect y utilizar setAuth solo cuando sea necesario. Aquí tienes una versión actualizada del componente Home:

    function Home(props) {
  const [auth, setAuth] = useState(false);

  useEffect(() => {
    async function checkAuth() {
      try {
        await Auth.currentAuthenticatedUser();
        setAuth(true);
      } catch {
        setAuth(false);
        console.log("error");
      }
    }

    checkAuth();
  }, []);

  console.log(auth);

  return auth ? (
    <div classname="c-app c-default-layout">
      <sidebar></sidebar>
      <div classname="c-wrapper">
        <header {...props}=""></header>
        <div classname="c-body">
          <content></content>
        </div>
        <footer></footer>
      </div>
    </div>
  ) : (
    <redirect to="/login"></redirect>
  );
}

    Con este código, la función checkAuth solo se llama una vez, cuando se monta el componente. El estado auth se actualiza solo cuando es necesario, evitando renders innecesarios y ciclos infinitos.

Comments are closed.