Question

我有一个示例应用程序，该应用程序有两条路线，一条是根主页，一条显示演员列表。

因此，一旦应用程序加载完毕，我会检查Cookie userHasAccess 是否存在（如果不存在），我将重定向至登录网址。否则，我将加载具有静态内容的主页，也将清除用户详细信息的cookie。成功登录后，我将id设置为cookie。因此，一旦加载主页，我将清除Cookie并在Redux中设置ID。

所以在componenWillRecieveProps上，我正在检查并调用api以获取用户是否可以看到actorsList组件。所以我正在传递来自redux的id并获得响应。因此，只有api解析后，我才会加载两条路由，直到页面为空。

所以问题是，如果我给出正常的路由而不是PrivateRoute，它可以正常工作，但是当我通过PrivateRoute组件给出路由时，这是递归调用，并且发生最大调用堆栈错误。

我可以知道我做错了吗。

如果我在下面的行中发表评论

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

替换为此

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

它起作用，没有最大调用堆栈问题。

如果用户直接输入localhost：3000 / actorsList并按Enter，为什么我要禁用PrivateRoute？

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 />
}

在通过PrivateRoute自定义组件检查身份验证时递归调用该组件

0 个答案: