Tengo una aplicación de reacción y un servidor nodejs. Configuré una cookie httpOnly que contiene un JWT para la autenticación. Esto funciona. El problema es: necesito algo de lógica del lado del cliente para verificar si el usuario ha iniciado sesión. Cuando el usuario inicia sesión, podría almacenar este "estado" en la memoria (por ejemplo, useState), pero cuando el navegador se recarga, este estado se ha ido (mientras que la cookie todavía está allí).
Intenté usar js-cookie pero obviamente esto no funcionará porque es una cookie httpOnly.
¿Cómo puedo verificar, sin hacer una solicitud (de prueba) de axios a mi servidor, si el usuario ha iniciado sesión al abrir la aplicación de reacción en el navegador?
Editar: la respuesta en esta pregunta recomienda almacenar el token en LocalStorage, pero otros recursos (como la discusión en la respuesta de esta pregunta ) dicen que las cookies son el camino a seguir.
para ser claros, no necesito acceso directo al token en la cookie, la cookie se envía con cada solicitud de axios ( {withCredentials: true} ) y funciona como se esperaba. Pero solo necesito saber si la cookie está configurada (y si el usuario inició sesión).
Puede haber múltiples enfoques para este escenario. Lo que creo que puedes hacer.
1: puede enviar una solicitud http para verificar si el JWT es válido en la carga inicial de la aplicación y cada vez que se vuelve a cargar la aplicación (básicamente, lo mismo) y luego conservar algún estado de autenticación dentro de la aplicación (Context Api o Redux) y de esta manera usted controla el rutas, etc
2 - Asegúrese de que cada vez que caduque el JWT borre la cookie y cada vez que el cliente reciba 401 actualice cualquier estado autenticado que tenga y redirija al usuario a la página de inicio de sesión o cualquier página que no necesite autenticación.
Solo para agregar a la respuesta seleccionada.
un componente de carga y un estado isLoading ayudarán a evitar que se muestren pantallas autenticadas/protegidas en una fracción de segundo. ex, isLoading ? <LoadingComponent /> : <ProtectedComponent />
Simplemente puede actualizar el estado isLoading cuando finaliza la solicitud, y si la solicitud produce un código de respuesta no autenticado, puede realizar una redirección.