javascript - with - secured route react router

Comment restreindre l'accès aux routes dans react-router? (4)

Mise à jour (16 août 2019)

Dans react-router v4 et en utilisant React Hooks, cela semble un peu différent. Commençons par votre App.js

export default function App() {
  const [isAuthenticated, userHasAuthenticated] = useState(false);

  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    } catch (e) {
      alert(e);
    }
  }

  return (
    <div className="App container">
      <h1>Welcome to my app</h1>
      <Switch>
        <UnauthenticatedRoute
          path="/login"
          component={Login}
          appProps={{ isAuthenticated }}
        />
        <AuthenticatedRoute
          path="/todos"
          component={Todos}
          appProps={{ isAuthenticated }}
        />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
}

Nous utilisons une bibliothèque d'authentification pour vérifier si l'utilisateur est actuellement authentifié. Remplacez-le par votre fonction de vérification d'authentification. Si tel est le cas, nous définissons l'indicateur isAuthenticated sur true . Nous le faisons lors du premier chargement de notre application. Il convient également de mentionner que vous voudrez peut-être ajouter un signe de chargement sur votre application lors de l'exécution de la vérification automatique, afin de ne pas flasher la page de connexion à chaque fois que vous actualisez la page.

Ensuite, nous passons le drapeau à nos itinéraires. Nous créons deux types de routes AuthenticatedRoute et UnauthenticatedRoute .

Le AuthenticatedRoute.js ressemble à ceci.

export default function AuthenticatedRoute({ component: C, appProps, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        appProps.isAuthenticated
          ? <C {...props} {...appProps} />
          : <Redirect
              to={`/login?redirect=${props.location.pathname}${props.location.search}`}
            />}
    />
  );
}

Il vérifie si isAuthenticated est défini sur true . Si c'est le cas, le composant souhaité sera rendu. Si non, alors il va rediriger vers la page de connexion.

Le UnauthenticatedRoute.js ressemble à cela.

export default ({ component: C, appProps, ...rest }) =>
  <Route
    {...rest}
    render={props =>
      !appProps.isAuthenticated
        ? <C {...props} {...appProps} />
        : <Redirect to="/" />}
  />;

Dans ce cas, si isAuthenticated est défini sur false , le composant souhaité sera rendu. Et s'il est défini sur true, il vous enverra à la page d'accueil.

Vous pouvez trouver des versions détaillées de ceci dans notre guide - https://serverless-stack.com/chapters/create-a-route-that-redirects.html .

Ancienne version

La réponse acceptée est correcte mais les Mixins sont considérés comme nocifs ( https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html ) par l'équipe de React.

Si quelqu'un tombe sur cette question et cherche la manière recommandée de le faire, je suggérerais d'utiliser des composants d'ordre supérieur au lieu de Mixins.

Voici un exemple de HOC qui vérifiera si l'utilisateur est connecté avant de continuer. Et si l'utilisateur n'est pas connecté, il vous redirigera vers la page de connexion. Ce composant isLoggedIn un accessoire appelé isLoggedIn . Il s'agit en gros d'un indicateur que votre application peut stocker pour indiquer si l'utilisateur est connecté.

import React from 'react';
import { withRouter } from 'react-router';

export default function requireAuth(Component) {

  class AuthenticatedComponent extends React.Component {

    componentWillMount() {
      this.checkAuth();
    }

    checkAuth() {
      if ( ! this.props.isLoggedIn) {
        const location = this.props.location;
        const redirect = location.pathname + location.search;

        this.props.router.push(`/login?redirect=${redirect}`);
      }
    }

    render() {
      return this.props.isLoggedIn
        ? <Component { ...this.props } />
        : null;
    }

  }

  return withRouter(AuthenticatedComponent);
}

Et pour utiliser ce COH, enroulez-le simplement autour de vos itinéraires. Dans le cas de votre exemple, ce serait:

<Route handler={requireAuth(Todos)} name="todos"/>

Je couvre ceci et quelques autres sujets dans un tutoriel détaillé étape par étape ici - https://serverless-stack.com/chapters/create-a-route-that-redirects.html