React router v4 wait for xhr authentication to transition to route - reactjs

Question

I am trying to implement some server side authentication (via xhr) while using React Router v4. I do not want the route to transition until I validate with my server that a user is authenticated (by having a token) as well as the token is stored in session storage (not that this needs to be async).
Currently the issue is that my "private" route is still trying to render even though the user is not authenticated.
My React Router routes look like:
class AppContainer extends Component {
render() {
return (
<div>
<main>
<Switch>
<Route exact path='/' component={Home} />
<PrivateRoute path='/dashboard' component={Dashboard} />
</Switch>
</main>
</div>
);
}
}
PrivateRoute, as specified looks like:
const isAuthenticated = async () => {
const resp = await axios.get('http://localhost/api/session');
const token = _.get(resp, 'data.success');
const authObj = storage.getFromSession('TOKEN');
return !_.isNil(_.get(authObj, 'Token')) && token;
};
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
isAuthenticated() ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/',
state: { from: props.location }
}}/>
)
)}/>
)
export default PrivateRoute;
The Dashboard is trying to render even though the user is not authenticated. How would I wait for my api call to be returned and then redirect the user to either /dashboard or / (home page)?

Answer 1

My last try you can use a component like this:
import React, {PropTypes} from 'react';
import {Redirect} from 'react-router-dom';
export default class PrivateRoute extends React.Component {
constructor(props) {
super(props);
this.state={loading:true,authenticated:false}
}
componentDidMount(){
/* your authentication logic...*/
setTimeout(()=>{
this.setState({loading:false,authenticated:true});
},3000)
}
render() {
if(this.state.loading)
return <h1>Loading</h1>;
if(this.state.authenticated)
return (this.props.children);
else
return <Redirect to="/" />
}
}
And use it in your router like this:
<Route path="/your-protected-route" component={()=><PrivateRoute><YourComponent /></PrivateRoute>} />