проблема защищенных маршрутов при переключении с реакции-маршрутизатора-избыточности на подключенный-реагирующий маршрутизатор

Question

Я выполняю миграцию моего приложения из react-router-redux -to -> connected-react-router, однако я вижу проблему.В настоящее время у меня есть определенные маршруты, которые защищены (требуются авторизованные пользователи), т. Е. Панель мониторинга

export default function Routes(props, context) {
  return (
    <Switch>
      <Route exact path="/" component={Login} />
      <Route path="/login" component={Login} />
      <Route
        render={props => <Authorization {...props} routes={AuthRoutes} />}
      />
    </Switch>
  )
}



const AuthRoutes = [
  <Switch>
    <Route path="/dashboard" component={Dashboard} />,
    <Route component={Error404} />
  </Switch>,
]

Компонент авторизации выглядит следующим образом:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Redirect, withRouter } from 'react-router'

class Authorization extends Component {
  isAuthenticated() {
    const { auth, app } = this.props
    const { search } = app
    console.log('====================================')
    console.log('Auth:', auth)
    console.log('====================================')
    if (auth && auth.token) {
      return this.props.routes.map((route, index) =>
        React.cloneElement(route, { key: index })
      )
    } else {
      return <Redirect to={{ pathname: '/login', search }} />
    }
  }
  render() {
    return <div style={{ width: '100%' }}>{this.isAuthenticated()}</div>
  }
}

export default connect(state => ({
  auth: state.auth,
  app: state.app,
}))(withRouter(Authorization))

После входа пользователя в системуон направляется на путь /dashboard, а token сохраняется для аутентификации в хранилище с избыточностью (которое сохраняется в localStorage).

ПРОБЛЕМА:

• При обновлении 1-й страницы оператор console.log (из Авторизации) выводит, что Auth: {token: null} и пользователь перенаправляется на /login
• При втором обновлении оператор console.log (из Авторизации) выводит, что Auth: {token: <userToken>} и пользователь перенаправляется на /dashboard (правильное поведение)
• После третьей консоли обновленияОператор .log (из Авторизации) выводит, что Auth: {token: null} и пользователь перенаправляется на /login
• После 4-го обновления оператор console.log (из Авторизации) выводит, что Auth: {token: <userToken>} и пользователь перенаправляется на /dashboard (правильное поведение)

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

Если я вернусь к использованию react-router-redux, пользователь будет перенаправлен на /dashboard правильно при каждом обновлении страницы после входа в систему.