Jak ograniczyć dostęp do tras w routerze reagowania?

Question

Czy ktoś wie, jak ograniczyć dostęp do określonych tras w routerze reagowania? Chcę sprawdzić, czy użytkownik jest zalogowany przed zezwoleniem na dostęp do konkretnej trasy. Myślałem, że to będzie proste, ale doktorzy nie wiedzą, jak to zrobić.

Czy jest to coś, co powinienem skonfigurować, definiując moje komponenty <Route>, czy też powinienem je obsługiwać wewnątrz modułów obsługi komponentów?

<Route handler={App} path="/"> 
    <NotFoundRoute handler={NotFound} name="not-found"/> 
    <DefaultRoute handler={Login} name="login"/> 
    <Route handler={Todos} name="todos"/> {/* I want this to be restricted */} 
</Route> 

Answer 1

Przyjęta odpowiedź jest poprawna, ale Mixiny są uważane za szkodliwe (https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html) przez zespół Reaktorów.

Jeśli ktoś natknie się na to pytanie i szuka zalecanego sposobu, aby to zrobić, sugeruję użycie komponentów wyższego rzędu zamiast Mixins.

Oto przykład HOC, który sprawdzi, czy użytkownik jest zalogowany przed kontynuowaniem. A jeśli użytkownik nie jest zalogowany, przekieruje Cię na stronę logowania. Komponent ten wykonuje rekwizyt nazwie isLoggedIn, który jest w zasadzie flag że aplikacja może przechowywać do określenia, czy użytkownik jest zalogowany.

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); 
} 

I korzystać z tej hoc, tylko owinąć go wokół swoich tras.W przypadku Twojego przykład, byłoby:

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

omówię ten i kilka innych tematów w szczegółowym krok po kroku samouczek tutaj - http://serverless-stack.com/chapters/create-a-hoc-that-checks-auth.html

Answer 2

zwykle zalogowany użytkownik otrzyma token i używa tego tokena do komunikacji z serwerem. Zazwyczaj definiujemy stronę główną i rzeczy budowane na górze tej strony. ta strona główna wykonuje dla Ciebie lokalizacje, uwierzytelnianie i inne konfiguracje.

Oto przykład

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> 
); 

na swojej stronie głównego, sprawdź tokena null lub uwierzytelniania token z serwerem w celu sprawdzenia, czy użytkownik jest ważny logowania.

nadzieję, że to pomoże :)

Answer 3

Jeśli chcesz korzystać z uwierzytelniania w poprzek całej aplikacji, trzeba przechowywać niektóre dane aplikacji szeroki (np tokena). Możesz skonfigurować dwa miksy React, które są odpowiedzialne za zarządzanie obiektem $auth. Ten obiekt nie powinien być dostępny poza tymi dwoma miksami. Oto przykład, że:

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(); 
        } 
       } 
      } 
     } 
    }; 
}); 

Następnie można po prostu mixin Authenticator mieszanie się komponentów logowania (ekran logowania, logowanie popup, etc) i nazywają this.login funkcję, gdy masz wszystkie dane niezbędne.

Najważniejszą rzeczą jest ochrona komponentów poprzez mieszanie w mieszaninie NeedsAuthenticatedUser. Każdy element, który musi uwierzytelniony użytkownik będzie musiał wyglądać tak:

var um = require('userManagement'); 

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

Zauważ, że NeedsAuthenticatedUser wykorzystuje reagowania-Router API (willTransitionTo i transition.abort()).

Answer 4

react-router zachęca deklaratywny podejście do routera, powinieneś ustawić router tak głupio, jak to możliwe i unikać umieszczania logiki routingu w komponentach.

Oto w jaki sposób można to zrobić (zakładając, że przejdzie mu loggedIn rekwizyt): (? Teraz)

const DumbRouter = ({ loggedIn }) => (
    <Router history={history}> 
    <Switch> 
     {[ 
     !loggedIn && LoggedOutRoutes, 
     loggedIn && LoggedInRouter, 
     <Route component={404Route} /> 
     ]} 
    </Switch> 
    </Router> 
); 

const LoggedInRoutes = [ 
    <Route path="/" component={Profile} /> 
]; 

const LoggedOutRoutes = [ 
    <Route path="/" component={Login} /> 
]; 

Answer 5

Jest to przykład tego w React docs Ruter 4 za Redirect

import { Route, Redirect } from 'react-router' 

<Route exact path="/" render={() => (
    loggedIn ? (
    <Redirect to="/dashboard"/> 
) : (
    <PublicHomePage/> 
) 
)}/>