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:

• use useLocation() de react-router-dom para detectar cada cambio de página.
• verifique el tiempo y verifique el Almacenamiento local "IS_TOGGLE" para ver si el Modal tiene una ventana emergente todavía.
• si el usuario ha agotado el tiempo de espera y IS_TOGGLE = 0, toggleModal();
• de lo contrario, cerrar sesión.

 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:

• caso 2
• caso 3
• /tablero
• caso 1
• /acceso

 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; }