Autorizzazione router di prova

Question

Quali sono le migliori pratiche per il controllo dell'autorizzazione prima del montaggio di un componente?

Io uso reagiscono-router 1.x

Qui sono i miei percorsi

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

Qui è la mia componente Dashboard:

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

soluzione aggiornata per Reagire router v4

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

Reagire router fino a v3

Usa 'onEnter' evento e sotto controllo richiamata se l'utente è autorizzato:

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

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

Answer 2

Con reagire-router 4 si ha accesso al Route props all'interno del componente. Per reindirizzare un utente devi solo inserire il nuovo URL nella cronologia. Nel tuo esempio, il codice sarebbe:

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

Alle documenti, essi mostrano another way to do it, utilizzando la proprietà render, invece di component. Definiscono uno PrivateRoute, che rende il codice molto esplicito quando si definiscono tutti i percorsi.

Answer 3

Se si desidera applicare l'autorizzazione su più componenti, è possibile farlo in questo modo.

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

Per singolo componente si può fare

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