0

Actualmente tengo el sistema de inicio de sesión y deslogueo de una aplicación de React usando JWT, en el backend tengo una ruta para el inicio, cierre y check del token.

La aplicación que desarrollo está con Redux y tengo el estado checking en true al inicio, y el atributo user en null, en mi authReducer, y ejecuto un startChecking en el AppRouter con useEffect y con dispatch a la acción de chequeo del token.

Las opciones funcionan correctamente, pero mi pregunta es, ¿cómo puedo hacer para que en caso de tener más de un pestaña abierta automáticamente se logueo o deslogueo de las demás pestañas de dicho sitio?

Gracias.

1 respuesta 1

1

Puedes utilizar redux-persist para que el state de redux se guarde en localStorage de manera que se compartirá entre pestañas.

https://github.com/rt2zz/redux-persist

O puedes guardar manualmente el token en localStorage y hacer el check incial de si esta en localStorage, hacer el dispatch para setearlo en redux.

EDIT:

Para poder hacer que entre varias pestañas detecte cuando te has logueado y se loguee también, puedes escuchar cambios en el localStorage mediante este evento:

window.addEventListener('storage', (e) => {
   console.log(`Key Changed: ${e.key}`);
   console.log(`New Value: ${e.newValue}`);
});

Cuando detectes que el token ha cambiado, hacer los cambios oportunos.

2
  • Actualmente guardo el token con localStorage, y efectivamente si la otra pestaña donde no inicié sesión la refresco se "loguea" pero si el usuario navega y no refresca el navegador no aparece como logueado ni deslogueado. ¿Con redux-persist podría resolverse ese problema de sincornización? Commented el 13 feb. 2021 a las 20:55
  • Esto es porque la gestión de si esta logueado o no, solo la hace cuando carga la aplicación, una vez ha cargado, al moverte entre rutas no vuelves a comprobar si tiene token, etc.. Normalmente el funcionamiento de las webs suele ser este, es raro encontrarte que se actualize el resto de pestañas sin tener que refrescar, pero si necesitas que cuando te loguees en una pestaña, las demás se enteren y se logueen también puedes hacerlo mediante un evento, he editado la respuesta explicandolo.
    – Tasio
    Commented el 14 feb. 2021 a las 8:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.