사실을 반환하지 않는 한 구성 요소 마운팅 연기

Question

PersonCreate 컨트롤러가 있습니다. 이 구성 요소에서 인증 된 사용자 (this.props.app.session.user.role.isAdmin())의 역할을 확인하고 값에 따라 양식을 렌더링해야합니다.

문제는 세션 개체를 생성하는 데 시간이 걸리는 것입니다. http://.../person/create에 대한 끝점을 찾아 볼 때 this.props.app.session.user.role.isAdmin()을 호출하려고하는데, 세션이 아직 생성되지 않았으므로 널 포인터 예외가 발생합니다.

내 라우터 파일은 다음과 같습니다.

class RootComponent extends React.Component<any, any> { 

    private generateSession() { 
    store.dispatch(SessionActions.generate()); 
    } 

    public render() { 
    return (
     <Router history={browserHistory}> 
     <Route path="/" component={Layout}> 
      <Route path="app" onEnter={this.generateSession}> 
      <Route path="person"> 
       <Route path="create" component={PersonCreate} /> 
       <Route path="update/:id" component={PersonUpdate} /> 
       <Route path="delete/:id" component={PersonDelete} /> 

    ... 

는 기본적으로 store.dispatch(SessionActions.generate())는 asyncronous 물건의 일련을하는 Saga를 생성합니다. (예 : 토큰 유효성 검사, 세션 정보 얻기, 로컬 저장소 새로 고침 등). 완료 후 구성 요소 렌더링을 시작해야합니다.

아이디어가 있으십니까?

public render() { 
    if (!this.props.app.session) { 
    return null; 
    } 

을 그리고 세션이 초기화됩니다 후에 경로를 렌더링 :

Answer 1

이 같은 RootComponent 체크인을 사용할 수 있습니다.

또는 PersonCreate 구성 요소에서 유사한 체크를 사용할 수 있습니다.

Answer 2

렌더링 용 로그인이 포함 된 React 구성 요소를 만들 수 있습니다. 이 구성 요소는 사용자 정보가 필요한 모든 경로를 래핑합니다. https://medium.com/the-many/adding-login-and-authentication-sections-to-your-react-or-react-native-app-7767fd251bd1