Tengo una aplicación de reacción con inicio de sesión de 1 hora, y una vez que se agotó el temporizador, el siguiente cambio de página mostrará un modal, preguntando si el usuario desea extender su tiempo por otra 1 hora o cerrar sesión. El modal solo debería aparecer una vez.
Entonces mi intento es:
const location = useLocation(); const [modal, setModal] = useState(false); useEffect(() => { const isToggle = localStorage.getItem("IS_TOGGLE"); const expiredTime = localStorage.getItem("EXPIRED_TIME"); //check if toggled yet and expire yet if ( isToggle === "0" && expiredTime && DateTime.fromISO(expiredTime).diffNow().toObject().milliseconds < 0 ) { console.log("case 3"); toggleModal(); } console.log(location.pathname); }, [location]);
function toggleModal() { localStorage.setItem("IS_TOGGLE", "1"); setModal(true); }
Pero el problema es que parece que toggleModal() desencadena una nueva representación, lo que hace que PrivateRoute se llame dos veces. La primera vez que se llama a PrivateRoute, devuelve elementos secundarios como se esperaba, pero la segunda vez, porque toggleModal() acaba de establecer IS_TOGGLE = "1", hace que el usuario cierre sesión inmediatamente.
Mi resultado de console.log:
const PrivateRoute = ({ children }) => { const { logout } = useAuth(); const user = JSON.parse(localStorage.getItem('USER')); const accessToken = localStorage.getItem("ACCESS_TOKEN"); const refreshToken = localStorage.getItem("REFRESH_TOKEN"); const expiredTime = localStorage.getItem("EXPIRED_TIME"); const isToggle = localStorage.getItem("IS_TOGGLE"); if (typeof user === 'undefined' || user === null || typeof accessToken === 'undefined' || accessToken === null || typeof refreshToken === 'undefined' || refreshToken === null || typeof expiredTime === 'undefined' || expiredTime === null || typeof isToggle === 'undefined' || isToggle === null || isToggle === "1") { logout(); console.log("case 1"); return <Navigate to="/login" />; }; console.log("case 2"); return children; }