Tenemos una aplicación SPA React que actualmente es accesible para cualquier persona. Sus solicitudes de backend están protegidas con un token de portador, pero también queremos que el frontend requiera alguna autenticación pero sin nombre de usuario/contraseña. La aplicación se llama desde otra de nuestras interfaces. Así que nuestra idea era enviar un token único con la llamada inicial desde la aplicación principal, verificar ese token con el backend compartido y luego inicializar una sesión para la aplicación SPA React que manejará, por ejemplo, una actualización de página y al mismo tiempo evitará la URL. adivinar o compartir un marcador.

Entonces mi pregunta es: ¿cuál es la forma más fácil de envolver un React SPA en una sesión?

Actualmente no usamos React Router, nuestra aplicación usa un backend nodejs con un controlador de índice que sirve un index.js. Allí se llevan a cabo todas las cosas de la aplicación de reacción: se carga la configuración, se crea la tienda redux, se manejan algunas solicitudes asíncronas, antes de que la aplicación finalmente se muestre y el usuario permanezca dentro de esa aplicación sin ningún enrutamiento:

 Promise.all(initializationPromises).then(() => { store.dispatch(showHome()); ReactDOM.render( <ReduxProvider store={store}> <RollbarProvider config={rollbarConfig}> <ErrorBoundary fallbackUI={FallbackError}> <App/> </ErrorBoundary> </RollbarProvider> </ReduxProvider>, document.getElementById("root") ); }

Entonces, como parte de las promesas de inicialización, tal vez podríamos verificar algún valor de encabezado de token enviado con la solicitud inicial. Entonces, todo lo que necesito es iniciar una sesión en una cookie que debe usarse durante un tiempo determinado. ¿Hay alguna pequeña envoltura que haría el truco? Nada especial, solo permita que se actualice la página o que avance/retroceda. También podemos invalidar la cookie explícitamente ya que la aplicación tiene un botón dedicado para "volver a la aplicación principal"/cerrar. Si se vuelve a llamar a la aplicación desde la aplicación principal, la cookie debería actualizarse en la próxima llamada index.js.