Utilizzo di react-router ed express con autenticazione tramite Passport.js - possibile?

Question

Quindi sto lavorando a un progetto che incorpora React, Express.js + Passport e Webpack. Comprendo il concetto di spingere tutto a un componente React "master" tramite react-router, quindi lasciandolo fuori ciò che viene visualizzato per la rotta specificata. Quello funzionerebbe benissimo qui, penso. Per essere sincero, sono nuovo di React.

Le mie preoccupazioni sono:

1) Posso/come posso ancora usare Passaporto per autenticare le mie vie? Se comprendo correttamente react-router, avrò una route nel mio file app.js express, che punta a, ad esempio, un componente React denominato . Tuttavia, Passport necessita di router.get('/myroute', isAuthenticated, callback) per controllare la sessione. È ancora possibile farlo con react-router?

2) Inoltre, se questo è possibile, come faccio a passare i valori dal percorso in Express nelle mie viste, in React? So che in una vista normale, potrei usare <%= user %> o {{user}} se l'ho passato dal mio percorso. È possibile qui?

Answer 1

Dividere un percorso di rendering vista da percorsi API. Dopotutto è possibile impostare la logica di autenticazione nelle chiamate 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/>)); 
    }); 
}); 

Quindi devi risolvere come si sta andando per passare i dati resi lato server in vista di un lato client (scegliere i dati isomorfiche tecnica di trasferimento).

È inoltre possibile creare viste e la logica di reindirizzamento solo su un lato client e, in primo luogo, eseguire il rendering di componenti in uno stato "in attesa" che verrà risolto su un client dopo il montaggio di un componente (controllare lo stato di autenticazione tramite una chiamata API).