javascript - node - Usando react-router y express con autenticación a través de Passport.js, ¿es posible?

passport js tutorial

Question

Así que estoy trabajando en un proyecto que incorpora React, Express.js + Passport y Webpack. Entiendo el concepto de empujar todo a un componente "maestro" Reaccionar a través de react-router, y luego dejar que se borre lo que se muestra para la ruta dada. Eso funcionaría muy bien aquí, creo. Para ser honesto, soy nuevo en Reaccionar.

Mis preocupaciones son:

1) ¿Puedo / cómo puedo seguir utilizando Passport para autenticar mis rutas? Si comprendo correctamente el enrutador de reacción, tendré una ruta en mi archivo express app.js, que apunta, digamos, a un componente React llamado <Application/> . Sin embargo, Passport necesita router.get(''/myroute'', isAuthenticated, callback) para verificar la sesión. ¿Todavía es posible hacerlo con react-router?

2) Además, si esto es posible, ¿cómo paso los valores de la ruta en Express a mis vistas, en React? Sé que en una vista típica, podría usar <%= user %> o {{user}} si lo pasé de mi ruta. ¿Es eso posible aquí?

Answer 1

Dividir una ruta de representación de vista a partir de rutas de API. Después de todo, puede establecer la lógica de autenticación en llamadas a la API.

//Auth check middleware
function isAuth(req, res, next) {...}
//API routes
app.post("api/users/login", function() {...});
app.post("api/users/logout", function() {...});
app.get("api/purchases", isAuth, function() {...});
//and so on...
//Wild card view render route
app.use(function(req, res) {
var router = Router.create({
onAbort: function(options) {...},
onError: function(error) {...},
routes: //your react routes
location: req.url
});
router.run(function(Handler) {
res.set("Content-Type", "text/html");
res.send(React.renderToString(<Handler/>));
});
});

Entonces, tiene que resolver cómo va a pasar los datos representados del lado del servidor en vistas al lado del cliente (elija su técnica de transferencia de datos isomorfos).

También puede crear vistas y la lógica de redirección solo en el lado del cliente y, en primer lugar, procesar los componentes de reacción en un estado "en espera" que se resolverá en un cliente después de que se monte un componente (verifique el estado de autenticación mediante una llamada a la API).