рекурсивный вызов компонента при прохождении через пользовательский компонент PrivateRoute для проверки аутентификации

Question

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

поэтому, как только приложение загрузится, я проверю cookie userHasAccess , если его нет, я перенаправлю на URL входа в систему. в противном случае я буду загружать домашнюю страницу, на которой у меня есть статический контент, а также я буду очищать куки от пользовательских данных. После успешного входа я устанавливаю идентификатор для куки. Поэтому, загрузив домашнюю страницу, я очистю куки и установлю идентификатор в редуксе.

поэтому на componentenWillRecieveProps я проверяю и вызываю API, чтобы узнать, может ли пользователь видеть компонентctorsList. Так что я передаю идентификатор из редукса и получаю ответ. Так что только API разрешает, я буду загружать два маршрута, пока страница не станет нулевой.

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

Могу ли я знать, что я делаю неправильно.

Если я прокомментирую строку ниже

 <PrivateRoute path="/actorsList" Component={Actors} accessString="viewActorsList" /> 

заменить на этот

<Route path="/actorsList" Component={Actors} />

работает, проблема с максимальным стеком вызовов не возникает.

Почему я делаю это PrivateRoute, чтобы отключить, если пользователь непосредственно набирает localhost: 3000 /ctorsList и нажимает ввод.

App.js

Class App extends Component{

  componentWillMount(){
   this.props.onSettingUserDetailsToRedux()
   onClearingCookies()
  }

  componentWillRecieveProps(nextProps){
   if(nextProps.currentUserDetails.id && !nextProps.onCurrentUserDetailsInit){
   this.props.getCurrentUserDetails(nextProps.currentUserDetails.id)
 }
  }


  onLoggedInHandler(Component){
   if(CheckAuthenticated()){
    return <Component />
   }else{
     // redirecting to login page
      axios.get("/api/loginToApp")
            .then(res => {
              window.location.replace(res.data.url)
            })

   }
  }


 render(){
   return (
     <div>
         {
           Object.keys(this.props.currentUserDetails).length > 0 ? 
         <Switch>
          <Route path="/" render={() => this.onLoggedInHandler(Home)}
          <Route path="/actorsList" Component={Actors} />
          <PrivateRoute path="/actorsList" Component={Actors} accessString="viewActorsList" /> // Commented one issue happens here
        </Switch>
          :
           null
         }

     </div>
   )
 }

}

PrivateRoute.js

export const PrivateRoute = ({ component: ComposedComponent, ...rest }) => {
    class Authentication extends Component {
        // Redirect to Home if there is no string includes       
            handleRender = (props) => {   
    if(this.props.currentUserList.tabs.includes(rest.accessString)) {
                return <ComposedComponent {...props} />
            } else {
                return <Redirect to="/" />
            }
        }
        render() {
            return (
                <Route {...rest} render={this.handleRender} />
            )
        }
    }

    const mapStateToProps = ({ currentUserDetails }) => {
        return {
            currentUserList: currentUserDetails.data
        }
    }

    const AuthenticationContainer = connect(mapStateToProps)(Authentication)
    return <AuthenticationContainer />
}