Как создать приложение React с несколькими общедоступными маршрутами?

Question

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

Каждая статья или учебник, которые я нашел по этому вопросу ( Как реализовать аутентифицированные маршруты в React Router4? ) объясняет, как разместить все ваши личные страницы за одним маршрутом (обычно это «панель инструментов»).Но я не хочу искусственно заставлять мое приложение иметь такую ​​структуру маршрута.Когда я работал с AngularJS, я указывал для каждого маршрута, должен ли пользователь проходить проверку подлинности или нет, чтобы получить к нему доступ.

Так, каков на данный момент лучший способ структурировать ваш маршрутизатор, чтобы указать, что несколькомаршруты общедоступны, а другие требуют аутентификации и перенаправят вас на страницу входа, если вы не?

Answer 1

Я согласен, что решение с компонентом высокого порядка, вот еще один пример, чтобы не задавать вопросы на каждом маршруте и иметь более общий способ сделать страницу приватной

У вас есть компонент-обертка: withAuthorization, который оборачивает ваш компонент, чтобы проверить, есть ли у вас доступ к этому содержимому или нет.

Это всего лишь быстрый пример, надеюсь, он вам поможет

const withAuthorization = Component => {
 return class WithAuthorization extends React.Component {
  constructor(props){
   super(props);
   this.state = {
    auth: false
   }
  }

 async componentDidMount() {
  // ask in your api for the authorization
  // if user has authorization
  this.setState({ auth: true })
 }

render () {
 const { auth } = this.state;
  return (
   {auth ? <Component {...this.props} /> : <Redirect to={`login`} />}
   )
  }
 }
}

export default withAuthorization;

Тогда, когда вы экспортируете свои компоненты, просто нужно сделать это следующим образом:

withAuthorization(ComponentToExport)

Answer 2

По сути, вы можете создать компонент высшего порядка, который можно использовать для проверки подлинности и выполнения необходимых действий ... Я делаю что-то подобное для моих защищенных маршрутов:

export const PrivateRoute = ({ component: Component, ...rest }) => {

 return (
    <Route
      {...rest}
      render={(props) =>
        checkAuth(user) === true ? (
          <Component {...props} />
        ) : (
          <Redirect to="/auth/login" />
        )
      }
    />
  );
};

Существует несколько способов.передать в ваш пользовательский объект ... так что я не поместил это туда

, тогда в моем маршрутизаторе я использую его следующим образом:

<PrivateRoute
        exact
        path="/application/version"
        component={AppVersion}
      />