Маршрутизация на основе проверки асинхронной аутентификации с использованием React-маршрутизатора

Question

Итак, следуйте ответам в этом вопросе , чтобы выполнить маршрутизатор в зависимости от того, аутентифицирован ли пользователь.

Мой маршрут выглядит следующим образом (это приложение только для аутентификации)-

"/" -> Login
 |
 |
 |- "/home" -> User Home page based on some criteria of the logged in user
 |
 |- "/catalog" -> Catalog page based on some criteria of the logged in user

Короче говоря, /home и /catalog являются защищенными маршрутами, и разрешены только аутентифицированные пользователи.Все пользователи, не прошедшие проверку подлинности, должны быть направлены в root, то есть "/", который является страницей входа в систему.Функция проверки подлинности - Async, поэтому у меня есть мои index.js и App.js что-то вроде этого -

index.js

import PrivateRoute from './App';

<BrowserRouter>
  <div>
    <Switch>
      <PrivateRoute path="/home" component={Client}/>
      <PrivateRoute path="/catalog" component={Catalog}/>
      <PrivateRoute path="/" component={Landing}/>
    </Switch>
  </div>
</BrowserRouter>

App.js

class App extends Component {
  state = {
    loading: true,
    isAuthenticated: false,
    role: ''
  };

  componentDidMount() {
    getUserSession((isValid,session,err) => {
      if (isValid){
        console.log('is Valid Session');
        this.setState({
          loading: false,
          isAuthenticated: isValid,
        });
      }else if (err){
        console.log('is InValid Session');
        this.setState({
          loading: false,
        });
      }
    });
  }

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

Стоит отметить, что я не использую Redux для получения состояния аутентификации пользователя, а вместо этого использую вызовы методов AWS Amplify, чтобы просто получить сеанс пользователя.Функция getUserSession возвращает информацию о том, действителен ли пользовательский сеанс, и некоторую дополнительную информацию, такую ​​как объект сеанса и т. Д.

У меня есть 2 проблемы -

1. При отсутствии проверки подлинностипользователь входит, перенаправление вызывает бесконечный цикл, так как "/" проходит проверку подлинности снова и снова через Redirect, вызывая ошибку Maximum update depth exceeded из-за вызова setState в App.js.

2. Если пользователь прошел аутентификацию, он попадает в строку <Component {...props} /> в App.js.Это нормально, если пользователь выбирает определенные маршруты /home или /catalog.Однако, если пользователь прошел проверку подлинности и перешел к корневому маршруту /, я бы хотел, чтобы он перенаправил его на один из маршрутов /home или /catlog, и я просто не понимаю, как это сделать.

Буду признателен за любые идеи.