Как правильно перенаправить с помощью маршрутизации React, когда пользователь не вошел в приложение?

Question

В React SPA у меня есть коллекция " pages " в папке / src / pages /.

Точка входа page является индексомФайл .js в папке / src /, где я определяю const маршрутизатора следующим образом:

const routing = (
  <Router>
    <div>
      <Switch>
        <Route path="/signIn" component={SignIn} />
        <Route exact path="/" component={Homepage} />
        <Route path="/page1" component={Page1} />
        <Route path="/page2" component={Page2} />
        <Route path="/page3" component={Page3} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </Router>

Отлично работает и все.Все страницы доступны для навигации, как "https://mysuperapp.com/page2", и он будет визуализировать компонент Page2 React.

Проблемы возникают, когда я включаю управление сеансом пользователя (вход, выход из системы). Еслипользователь не вошел в приложение, все страницы должны автоматически перенаправить на страницу / signIn . И наоборот, если пользователь уже вошел в систему, если страница / signIn * Доступ к 1021 *, он должен автоматически перенаправить на корневую домашнюю страницу.

Сейчас я реализовал это, добавив следующий код к всем страницам , вернопосле того, как метод render () объявлен в компоненте, например:

class Page2 extends React.Component {
  render() {
    if (UserProfile.getUserSessionStatus() !== "logged") {
      this.props.history.push("/signIn");
    }
  }

  return (
    JSX code to be rendered here...
    ...

Это работает, но похоже на дешевый обходной путь, используемый кем-то, кто только изучает React, а не профессионалом.

Для подтверждения концепции это работает, но я бы никогда не осмелился использовать такую ​​вещь в производственной среде.

Итак, каков правильный, ориентированный на лучшие практики способ добиться этого?

Answer 1

Один из возможных подходов - создать компонент высшего порядка (HOC) и использовать его для защиты любых маршрутов, требующих входа в систему.

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    UserProfile.getUserSessionStatus() === "logged"
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
)

И затем использовать вот так

.....
<PrivateRoute path='/page1' component={Page1} />
.......

Надеюсь, это поможет!