Возможно использование маршрутизатора и экспресс с аутентификацией через Passport.js?

Итак, я работаю над проектом, который включает React, Express.js + Passport и Webpack. Я понимаю концепцию подталкивания всего к компоненту "хозяин" React с помощью "реактивного маршрутизатора", а затем позволяет ему отображать то, что отображается для данного маршрута. Думаю, это здорово будет здесь. Чтобы быть откровенным, я новичок в React.

Мои проблемы:

1) Могу ли я/как я могу использовать Passport для аутентификации моих маршрутов? Если я правильно понимаю маршрутизатор, у меня будет один маршрут в моем экспресс файле app.js, указывая, например, на компонент React с именем <Application/>. Однако для проверки сеанса Passport требуется router.get('/myroute', isAuthenticated, callback). Возможно ли это сделать с помощью ретранслятора?

2) Кроме того, если это возможно, как передать значения из маршрута Express в мои представления в React? Я знаю в типичном виде, я мог бы использовать <%= user %> или {{user}}, если бы я передал это с моего маршрута. Возможно ли это здесь?

ОТВЕТЫ

Ответ 1

Разделить путь рендеринга представления из путей API. В конце концов вы можете настроить логику аутентификации на вызовы 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/>));
  });
});

Итак, вам нужно решить, как вы собираетесь передавать данные на стороне сервера в представлениях на стороне клиента (выберите метод изоморфной передачи данных).

Вы также можете создавать представления и логику перенаправления только на стороне клиента и сначала визуализировать реагирующие компоненты в состоянии ожидания, которое будет разрешено на клиенте после того, как компонент будет установлен (проверьте состояние аутентификации через вызов API).