Tengo una duda con respecto a la representación dinámica del nombre del usuario que inició sesión en la barra de navegación en reaccionar.
Así que mi aplicación está estructurada de la siguiente manera
<App> <Header/> <Router> .... <Router/> <Footer/> <App/>Ahora, dentro del componente de encabezado, necesito mostrar "Bienvenido <usuario>" cada vez que el usuario haya iniciado sesión. Aquí hay algunas soluciones en las que pensé, pero no estoy seguro si me estoy perdiendo algo.
-) Creo que se puede lograr en Angular mediante BehaviorSubject, pero en este escenario, no tengo ni idea.
¿Hay alguna solución o método que me esté perdiendo? Gracias por adelantado
Puede enviar al usuario como accesorio al encabezado. Ese es el método preferido. Haga que el usuario inicie sesión y guarde el estado de su aplicación con redux del useState que ahora está disponible en React.
A su segunda pregunta, los JWT conservan los datos de la sesión. Volver a renderizar la página no hará que desaparezca. Las aplicaciones bien diseñadas tienen JWT con un tiempo de vencimiento (generalmente 20 minutos o menos).
Trabajé en una aplicación de votación que hacía exactamente lo que estaba buscando y no requería ninguna gestión de estado global. Siéntete libre de elegirlo. Es un proyecto de código abierto. Creo que usamos Auth0 o la biblioteca Oauth de Google para realizar la autenticación.
Aquí está el código para el encabezado React (barra de navegación): https://github.com/poll-pal/poll-pal/blob/master/src/Components/Header/Header.js
Aquí está el código para el servidor Express que lo respaldó: https://github.com/poll-pal/poll-pal/blob/master/server/routes/auth.js
Al principio, si desea mantener a su usuario conectado, debe almacenar el JWT en algún lugar. Aquí por 'algún lugar' quiero decir, para que pueda acceder a él en la próxima recarga.
En mi proyecto máximo, almaceno mi JWT en almacenamiento local. funciona algo como esto
JWT en el almacenamiento local también en mi reductor. initial_state = { userName: localstorage.getItem('user_name') }Así es como puede mantener a su usuario conectado y, en el momento de cerrar la sesión, borrar el almacenamiento local y el reductor.