Caja de arena de código: https://codesandbox.io/s/new-breeze-d260k
Login , el token de acceso se intercambia y se almacena en la memoria, mientras que el token de actualización se almacena en localStorage.onRefreshToken() en un useEffect que se ejecutará una vez (quería pasar una matriz vacía como dependencia pero mecanografiado/eslint se queja y sugiere que onRefreshToken() debería ser la dependencia. Lo admito que no entiendo por qué se recomienda tener siempre una dependencia cuando se quiere que el efecto se ejecute una vez).setProfile() y no a setAccessToken() . Sin embargo, no entiendo por qué.El problema anterior es el problema principal de esta publicación, pero en una nota al margen, el proceso de inicio/cierre de sesión no se sincroniza entre pestañas, por lo que si tiene alguna idea de por qué, también me encantaría escuchar su consejo sobre este punto.
Feliz año nuevo
Una forma de solucionar esto sería verificar si tiene un token de acceso y solo actualizarlo si es necesario:
export default function App() { const { accessToken } = useAuthContext(); const { onRefreshToken, onSyncLogin, onSyncLogout } = useAuth(); useEffect(() => { const refresh = async () => { await onRefreshToken(); }; !accessToken && refresh(); }, [onRefreshToken, accessToken]);