React Router Authorization

Question

Was sind die Best Practices für die Autorisierungsprüfung vor einer Komponentenmontage?

Ich reagiere-Router verwenden 1.x

Hier sind meine Routen

React.render((
    <Router history={History.createHistory()}> 
    <Route path="/" component={Dashboard}></Route> 
    <Route path="/login" component={LoginForm}></Route> 
    </Router> 
), document.body); 

Hier ist meine Dashboard-Komponente:

var Dashboard = React.createClass({ 
    componentWillMount: function() { 
    // I want to check authorization here 
    // If the user is not authorized they should be redirected to the login page. 
    // What is the right way to perform this check? 
    }, 

    render: function() { 
    return (
     <h1>Welcome</h1> 
    ); 
    } 
}); 

Answer 1

aktualisiert Lösung für Reagieren Router v4

<Route 
    path="/some-path" 
    render={() => !isAuthenticated ? 
    <Login/> : 
    <Redirect to="/some-path" /> 
}/> 

Reagieren Routers

Use 'onEnter' Ereignis v3 und in Rückruf zu überprüfen, ob der Benutzer berechtigt ist:

<Route path="/" component={App} onEnter={someAuthCheck}> 

const someAuthCheck = (nextState, transition) => { ... } 

Answer 2

Mit reagieren-Router 4 Sie haben Zugriff auf die Route props innerhalb der Komponente. Um einen Benutzer umzuleiten, müssen Sie einfach die neue URL in den Verlauf schieben. In Ihrem Beispiel würde der Code:

var Dashboard = React.createClass({ 
    componentWillMount: function() { 
    const history = this.props.history; // you'll have this available 
    // You have your user information, probably from the state 
    // We let the user in only if the role is 'admin' 
    if (user.role !== 'admin') { 
     history.push('/'); // redirects the user to '/' 
    } 
    }, 

    render: function() { 
    return (
     <h1>Welcome</h1> 
    ); 
    } 
}); 

An dem docs, sie zeigen another way to do it, unter Verwendung der render Eigenschaft, statt component. Sie definieren eine PrivateRoute, die den Code sehr explizit macht, wenn Sie alle Ihre Routen definieren.

Answer 3

Wenn Sie die Berechtigung auf mehrere Komponenten anwenden möchten, dann können Sie es wie folgt tun.

<Route onEnter={requireAuth} component={Header}> 
    <Route path='dashboard' component={Dashboard} /> 
    <Route path='events' component={Events} /> 
</Route> 

Für einzelne Komponente können Sie

<Route onEnter={requireAuth} component={Header}/> 

function requireAuth(nextState, replaceState) { 
    if (token || or your any condition to pass login test) 
    replaceState({ nextPathname: nextState.location.pathname }, 
    '/login') 
}