Comment implémenter le routage authentifié dans React Router 4 ?

Routage authentifié dans React Router 4

Les routes authentifiées dans React Router 4 nécessitent une approche différente de celle des versions précédentes. React Router 4 ne prend plus en charge les routes imbriquées avec des composants et des accessoires enfants, ce qui rend plus difficile la mise en œuvre de routes authentifiées.

Solution : utiliser le composant de redirection

Pour implémenter des routes authentifiées. routes, vous pouvez utiliser le composant Redirect. Le composant Redirect redirige l'utilisateur vers un chemin différent en fonction d'une condition donnée.

Considérez le composant PrivateRoute suivant :

<code class="javascript">function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}</code>

Ce composant restitue le composant spécifié si l'utilisateur est authentifié (anthed === vrai); sinon, il redirige l'utilisateur vers la page de connexion.

Utilisation :

Maintenant, vous pouvez utiliser le composant PrivateRoute dans vos itinéraires comme ceci :

<code class="javascript"><Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} /></code>

Dans cet exemple, la PrivateRoute de la route du tableau de bord redirigera les utilisateurs non authentifiés vers la page de connexion.

Solution alternative : répartition des actions

Une autre approche, qui peut être moins souhaitable, consiste à distribuer une action dans la méthode de rendu de votre composant AuthenticatedRoute. Cela pourrait ressembler à :

<code class="javascript">export default class AuthenticatedRoute extends React.Component {
  render() {
    if (!this.props.isLoggedIn) {
      this.props.redirectToLogin()
      return null
    }
    return <Route {...this.props} />
  }
}</code>

Cette approche déclenche une redirection vers la page de connexion lorsque l'utilisateur n'est pas connecté, mais elle peut sembler moins élégante que l'utilisation du composant Redirect.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!