Comment gérer l'authentification dans React Router 4 ?

Gestion de l'authentification dans React Router 4

Dans React Router version 4, la mise en œuvre de routes authentifiées nécessite une approche différente par rapport aux versions précédentes.

Approche originale

Auparavant, vous pouviez utiliser plusieurs composants de route avec des enfants, mais cela est désormais déconseillé.

<Route exact path="/&quot; component={Index} />
<Route path="/auth" component={UnauthenticatedWrapper}>
    <Route path="/auth/login" component={LoginBotBot} />
</Route>
<Route path="/domains" component={AuthenticatedWrapper}>
    <Route exact path="/domains" component={DomainsIndex} />
</Route>

Correct Implémentation

Pour implémenter des routes authentifiées, une option consiste à utiliser un composant personnalisé qui étend Route et vérifie l'authentification avant de restituer le composant.

import React, {PropTypes} from "react";
import {Route} from "react-router-dom";

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

AuthenticatedRoute.propTypes = {
  isLoggedIn: PropTypes.bool.isRequired,
  component: PropTypes.element,
  redirectToLogin: PropTypes.func.isRequired
}

Approche alternative

Approche alternative

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

Une autre approche consiste à utiliser le composant Redirect, qui vous permet de rediriger les utilisateurs en fonction d'une propriété authentifiée.

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

Vous pouvez ensuite utiliser le composant PrivateRoute dans vos itinéraires :

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!