Express маршрутизация в приложение React в зависимости от статуса входа

Question

У меня есть небольшое приложение Express, которое обрабатывает вход / выход и отображает приложение React, которое берет на себя маршрутизацию с этого момента. Однако у меня есть требование не отображать приложение React, если пользователь не вошел в систему. У меня есть четыре маршрута, определенные в части Express: /, /login, /logout и /user (используется для получения пользовательских данных из приложения React).

/ делает это:

app.get('/', (req, res) => {
  if (req.user) {
    res.redirect('/react-entry-point');
  }
  res.redirect('/login');
});

и, похоже, это работает. Однако, если go - /react-entry-point прямо из моего браузера, я попадаю в приложение React. Я обычно не работаю с бэкэндом, поэтому не знаю, как лучше с этим справиться. Могу ли я как-нибудь перехватить запрос /react-entry-point (или любой другой запрос в этом отношении), проверить его на наличие req.user и перенаправить, если он не существует?

Answer 1

Вы должны создать Guard/Protected Route внутри своего приложения для реагирования, где вы сможете проверить свой сеанс непосредственно перед обслуживанием правильного содержимого маршрутизатора. Не забудьте проверить данные сеанса на бэкэнде.

const ProtectedRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    session.isLoggedIn ?
    <Component {...props} />
      : <Redirect to={{
          pathname: '/login',
          state: { from: props.location }
        }} />
  )} />
);

, а затем:

<ProtectedRoute path='/protected' component={Protected} />

Вы можете прочитать пример кода здесь: https://github.com/lblima/react-protected-routes

Answer 2

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

app.get("/", checkAuth, (req, res) => {
  res.redirect("/react-entry-point");
});

app.get("/user", checkAuth, (req, res) => {
  res.status(200).json({...});
});

function checkAuth(req, res, next) {
  if (!req.user) {
    res.redirect("/login");
    return;
  }
  next();
}