Comment restreindre l'accès à des routes dans réagissent-routeur?

Mise À Jour (Août 16, 2019)

Dans réagissent-routeur v4 et à l'aide de Réagir Crochets cela ressemble un peu différent. Nous allons commencer avec 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 sommes à l'aide d'un Auth bibliothèque pour vérifier si l'utilisateur est authentifié. Remplacez-le par votre auth de la fonction de contrôle. Si oui, alors nous avons mis l' isAuthenticated drapeau à true. Nous le faisons lors de notre première Application des charges. Également digne de mention, vous voudrez peut-être ajouter un chargement de signer sur votre application, tandis que l'auth vérification est en cours d'exécution, vous n'avez pas flash la page de connexion à chaque fois que vous actualisez la page.

Ensuite on passe le drapeau à nos routes. Nous avons créer deux types de routes AuthenticatedRoute et UnauthenticatedRoute.

La 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 fixé à true. Si c'est le cas, ça va rendre le composant souhaité. Si pas, alors il va rediriger vers la page de connexion.

La UnauthenticatedRoute.js sur l'autre main qui ressemble à ça.

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

Dans ce cas, si le isAuthenticated est fixé à false, ça va rendre le composant souhaité. Et si elle est définie sur true, il va vous envoyer à la page d'accueil.

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

Ancienne version

Accepté la réponse est correcte, mais Mixin sont considérés comme dangereux (https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html) par le Réagissent de l'équipe.

Si quelqu'un vient à travers cette question et est à la recherche de la manière recommandée pour ce faire, je suggère à l'aide d'Ordre Supérieur Composants au lieu de Mixin.

Voici un exemple d'un HOC qui vais vérifier si l'utilisateur est connecté avant de continuer. Et si l'utilisateur n'est pas connecté, alors il va vous rediriger vers la page de connexion. Ce composant prend un accessoire appelé isLoggedIn, qui est essentiellement un indicateur que votre application peut stocker d'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 à utiliser cette HOC, suffit de l'enrouler autour de vos itinéraires. Dans le cas de votre exemple, il serait:

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

Je couvre ce et de quelques autres sujets en détail, étape par étape tutoriel ici - https://serverless-stack.com/chapters/create-a-hoc-that-checks-auth.html

Si vous souhaitez utiliser l'authentification à travers l'ensemble de votre demande, vous avez besoin pour stocker des données de l'application (par exemple, un jeton). Vous pouvez configurer deux Réagissent mixin qui sont responsables de la gestion $auth objet. Cet objet ne doit pas être disponible en dehors de ces deux mixin. Voici à titre d'exemple:

define('userManagement', function() {
    'use strict';

    var $auth = {
        isLoggedIn: function () {
            //return something, e.g. using server-stored data
        }
    };

    return {
        Authenticator: {
           login: function(username, password) {
               //modify $auth object, or call server, or both
           }
        },

        NeedsAuthenticatedUser: {
            statics: {
                willTransitionTo: function (transition) {
                    if (!$auth.isLoggedIn()) {
                        transition.abort();
                    }
                }
            }
        }
    };
});

Alors vous pouvez simplement mixin Authenticator mélange à votre de connexion des composants (écran de connexion, de connexion de pop-up, etc) et d'appeler this.login fonction quand vous avez toutes les données nécessaires.

La chose la plus importante est la protection de vos composants en mélangeant dans NeedsAuthenticatedUser mixin. Chaque composant qui a besoin authentifié, l'utilisateur doit ressembler à ça:

var um = require('userManagement');

var ProtectedComponent = React.createClass({
    mixins: [um.NeedsAuthenticatedUser]
    //...
}

Noter que NeedsAuthenticatedUser utilise réagir-routeur API (willTransitionTo et transition.abort()).

privé de l'itinéraire.tsx

import {Redirect, Route, RouteProps} from 'react-router';
import * as React from 'react';

interface PrivateRouteProps extends RouteProps {
  /**
   * '/login' for example.
   */
  redirectTo: string;

  /**
   * If true, won't redirect.
   * We are using a function instead of a bool, a bool does not seem to be updated
   * after having successfully authenticated.
   */
  isLogged: () => boolean;
}


export function PrivateRoute(props: PrivateRouteProps) {
  //`component: Component` is not typing, it assign the value to a new variable.
  let { isLogged, redirectTo, component: Component, ...rest }: any = props;

  //error: JSX type element Component does not have call signature or ... AVOIDED BY ADDING ANY, still work,
  //and did not find a proper way to fix it.
  return <Route {...rest} render={(props) => (
    isLogged()
      ? <Component {...props}/>
      : <Redirect to={{
        pathname: redirectTo,
        state: { from: props.location }
      }} />
  )} />;
}

Utilisation:

        <PrivateRoute exact={true} 
                      path="/admin/" 
                      redirectTo={'/admin/login'} 
                      isLogged={this.loginService.isLogged} 
                      component={AdminDashboardPage}/>
        <Route path="/admin/login/" component={AdminLoginPage}/>

Basé sur https://tylermcginnis.com/react-router-protected-routes-authentication/.

généralement un utilisateur connecté sera accordé un jeton, et utilise cette marque pour toute communication avec le serveur. Ce que nous avons l'habitude de faire est de définir une page racine, et les choses se construire au-dessus de cette page. cette page racine ne de la localisation, de l'authentification et d'autres configurations pour vous.

voici un exemple

Routes = (
    <Route path="/" handler={Root}>
        <Route name="login" handler={Login} />
        <Route name="forget" handler={ForgetPassword} />
        <Route handler={Main} >
            <Route name="overview" handler={Overview} />
            <Route name="profile" handler={Profile} />
            <DefaultRoute handler={Overview} />
        </Route>
        <DefaultRoute handler={Login} />
        <NotFoundRoute handler={NotFound} />
    </Route>
);

sur la racine de votre page, vérifier jeton de la valeur null ou d'authentifier le jeton avec le serveur pour voir si l'utilisateur est valide de connexion.

espère que cela aide 🙂