Estoy tratando de implementar una actualización automática para el token de acceso cada "t" minutos; Implementé un setInterval en useEffect (en el componente raíz), que envía una solicitud de un nuevo token de acceso. Cuando ejecuto el código, a veces el intervalo comienza en Mount y otras veces no se ejecuta en absoluto.
Otro problema que tengo es que cuando redirijo al usuario a la página de inicio de sesión, trato de borrar el intervalo y continúa ejecutándose incluso después de clearInterval.
Si hay alguna otra forma de implementar tokens de actualización de JWT en intervalos de tiempo establecidos, también estoy abierto a ellos.
useEffect(() => { async function getRefreshToken() { const response = await axios.post("http://localhost:3001/refreshToken", {refreshToken}, {withCredentials: true}) if (response.data.redirect) { clearInterval(refresh) history.replace(`${response.data.redirect}`) localStorage.clear() }} const refresh = setInterval(getRefreshToken, 4000) }, [])Aquí hay un ejemplo de trabajo de codesandbox . Puede cambiar las funciones para que coincida con su caso
Lo que desea es una referencia para almacenar el intervalo para borrarlo fuera de useEffect. Puede establecer el intervalo tal como lo hace dentro de useEffect y guardar el intervalo dentro de la referencia:
const ref = useRef() useEffect(() => { const interval = setInterval(...) ref.current = interval }, []) Debe usar una función de limpieza dentro de useEffect para evitar pérdidas de memoria:
useEffect(() => { const interval = setInterval(...) ref.current = interval return () => clearInterval(interval) }, [])Luego, puede borrar el intervalo siempre que use:
clearInterval(ref.current) Recuerde usar useCallback hook en su función de llamada axios para asegurarse de que la reacción no se renderice innecesariamente.