Composant de redirection de rendu basé sur une requête ajax

Question

J'ai un chemin de départ '/' et chaque fois qu'un utilisateur va sur cette route, je veux l'envoyer sur sa page s'il est authentifié ou l'envoyer sur la route '/ login' s'il n'est pas authentifié. Afin d'envoyer un utilisateur à sa page je fais une demande au serveur, récupère son identification et le redirige vers l'itinéraire basé sur l'identification que je reçois du serveur. Cependant, je suis un peu confus quant à la façon d'implémenter cette logique dans mon composant Home correctement. Quel serait le meilleur moyen de rendre le composant de redirection basé sur le résultat de la requête ajax?

class Home extends React.Component { 

    async componentDidMount() { 
     const response = await Api.getUserId(); 
     const id = response.data._id; 
    } 

    render() { 
     if(this.props.userStatus.authenticated) { 
      return <Redirect to={{ 
       pathname: `/${id}`, 
       state: { from: this.props.location } 
      }}/> 
     } 
     return <Redirect to={{ 
      pathname: '/login', 
      state: { from: this.props.location } 
     }}/> 
    } 
} 

export default connectComponent(['userStatus'], Home); 

Answer 1

Vous pouvez le faire: Créer un nouveau composant appelé PrivateRoute:

import React from 'react' 
import { Redirect, withRouter, Route } from 'react-router-dom' 
import { isLogin } from '../actions/actions_rents' 
import { connect } from 'react-redux' 

const PrivateRoute = ({ component: Component, ...rest }) => { 
    return(
     <Route {...rest} render={props => (
     isAuthenticated ? (
     <Component /> 
     ) : (
     <Redirect to={{ 
      pathname: '/login', 
      state: { from: props.location } 
     }}/> 
    ) 
    )}/> 
) 
} 

Et puis en vous app.js ou où vous avez vos itinéraires, vous appelez PrivateRoute et passer comme accessoires le composant Accueil dans ce cas:

<Switch> 
    <Route path="/login" component={Login}/> 
    <PrivateRoute path="/" component={IndexRents} /> 
</Switch> 

aussi, je vous recommande de voir cet exemple: https://reacttraining.com/react-router/web/example/auth-workflow

Answer 2

fetch('//offline-news-api.herokuapp.com/stories') 
.then(function (response) { 
    console.log(response); 
    const login = response.ok; 
    class Entry extends React.Component { 
     constructor(props) { 
      super(props); 
     } 
     render() { 
      return (
       <Router> 
        <Switch> 
         <Route exact path="/login" component={Login}/> 
         <Route path="/" render={() => (
          login ? (
           <Common/> 
         ) : (
          <Redirect to="/login"/> 
         ) 
         )}/> 
        </Switch> 
       </Router> 
      ); 
     } 
    } 

    ReactDOM.render(<Entry/>, document.getElementById('root')); 

}) 
.then(function (stories) { 
});