, Страницы входа не являются частными.

я есть этоPrivateRoute компонент (из документов):

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

Я хотел бы изменитьisAuthenticated на запрос aysncisAuthenticated(), Однако до того, как ответ вернется, страница перенаправляет.

Чтобы уточнить,isAuthenticated функция уже настроена.

Как я могу дождаться завершения асинхронного вызова, прежде чем решить, что отображать?

Ответы на вопрос(2)

много изменить решение, чтобы не отображать загрузочный div несколько раз (по одному разу для каждого PrivateRoute, определенного в приложении), отображая загрузочный div внутри, а не снаружи, в маршруте (аналогичноПример аутентификации React Router):

class PrivateRoute extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: true,
      isAuthenticated: false
    }
  }

  componentDidMount() {
    asyncCall().then((isAuthenticated) => {
      this.setState({
        loading: false,
        isAuthenticated
      })
    })
  }

  render() {
    const { component: Component, ...rest } = this.props
    return (
      <Route
        {...rest}
        render={props =>
          this.state.isAuthenticated ? (
            <Component {...props} />
          ) : (
              this.state.loading ? (
                <div>LOADING</div>
              ) : (
                  <Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />
                )
            )
        }
      />
    )
  }
}

Выдержка из моего App.js для полноты:

<DashboardLayout>
  <PrivateRoute exact path="/status" component={Status} />
  <PrivateRoute exact path="/account" component={Account} />
</DashboardLayout>
 Annjawn08 июн. 2018 г., 22:13
Эй, Крейг, это на самом деле работает, но не могли бы вы сказать мне, где/login будет перенаправлен на? Я имею в виду какой компонент? Это должен быть компонент "Логин" где-нибудь, но если я определю/login любить<PrivateRoute exact path="/login" component={Login} /> в App.js это был бы бесконечный цикл.
 emzero16 июл. 2018 г., 16:29
@ Annjawn Вы бы не определили/login маршрут какPrivateRoute, но нормальныйRoute, Страницы входа не являются частными.

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

class PrivateRoute extends React.Component {
  state = {
    loading: true,
    isAuthenticated: false,
  }
  componentDidMount() {
    asyncCall().then((isAuthenticated) => {
      this.setState({
        loading: false,
        isAuthenticated,
      });
    });
  }
  render() {
    const { component: Component, ...rest } = this.props;
    if (this.state.loading) {
      return <div>LOADING</div>;
    } else {
      return (
        <Route {...rest} render={props => (
          <div>
            {!this.state.isAuthenticated && <Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />}
            <Component {...this.props} />
          </div>
          )}
        />
      )
    }
  }
}
 pizza-r0b29 сент. 2018 г., 18:18
@ J.Pedro по натуре клиентская сторона JS небезопасна. Чтобы изменить переменную isAuthenticated на true, потребуется чуть больше, чем просто открыть консоль разработчика - вам, вероятно, придется просмотреть скомпилированный минимизированный код и затем прокси-сервер нового JS-файла. Если кто-то достаточно решителен, он сможет увидеть некоторыхisAuthenticated Тем не менее, пользовательский интерфейс отвечает за отображение всех аутентифицированных данных и проверку того, что пользователь аутентифицирован и имеет право просматривать данные. Таким образом, даже если кто-то видел аутентифицированный пользовательский интерфейс - дело за защитой конфиденциальных данных.
 J. Pedro28 сент. 2018 г., 16:20
насколько безопасно это действительно удерживает isAuthenticated как переменную состояния? Не мог ли пользователь просто открыть консоль разработчика и изменить значение на true?
 raddevon04 окт. 2017 г., 17:53
state = … не работает для меня внутри объявления класса. Мне пришлось использовать конструктор, чтобы установить начальное состояние вместо этого.
 pizza-r0b04 окт. 2017 г., 21:11
Вам нужно будет настроить babel для использования преобразования свойств класса или использовать предустановленные шаги 0 - 2 для того, чтобы это работало @raddevon
 Annjawn08 июн. 2018 г., 23:25
@ pizza-r0b Можете ли вы сказать мне, как настройки маршрутизатора index.js для вашего кода?

Ваш ответ на вопрос