Postponing component mounting unless I return true - reactjs

Question

I have a controller called PersonCreate. In this component, I have to check the role of the authenticated user (this.props.app.session.user.role.isAdmin()) and depending on the value, render some form.
The problem is, it takes a while to generate the session object. When I browse the endpoint for http://.../person/create, it tries to call this.props.app.session.user.role.isAdmin(), which throws null pointer exception because session is not generated yet.
My Router file looks like this.
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} />
...
Basically store.dispatch(SessionActions.generate()) generated a Saga which does a series of asyncronous stuff. (e.g validate token, obtain session information, refresh local storage etc.) I have to start rendering components after they complete.
Any ideas?

Answer 1

You can use check in RootComponent like this:
public render() {
if (!this.props.app.session) {
return null;
}
and it will render routes only after session will be initialized.
Or you can use similar check in PersonCreate component.

Answer 2

You can create a React Component that contains login for rendering. This component wraps all of the routes that require users information.
<Route path=”/” component={App}>
<Route path=”cart” component={Cart}/>
<Route path=”login” component={Login}/>
<Route component={EnsureLoggedInContainer}>
<Route path=”checkout” component={Checkout}/>
<Route path=”account” component={Account}/>
</Route>
</Route>
And in this "parent"(EnsureLoggedInContainer) component in render do something like:
render() {
if (isLoggedIn) {
return <AppropriateUserForm />;
} else {
return <LoadingIndicator />;
}
}
You can read more about this approach here:
https://medium.com/the-many/adding-login-and-authentication-sections-to-your-react-or-react-native-app-7767fd251bd1