React Router Authentifizierung Async

Question

Ich bin neu zu reagieren.

Ich möchte eine gewisse Sicherheit zu meiner Async-Routen hinzufügen, die ich in meinem routes.js umgesetzt:

import React from 'react'; 
import App from './app.jsx'; 
import Home from './components/home.jsx'; 

import {Router, Route, IndexRoute, hashHistory} from 'react-router'; 

function loadRoute(cb) { 
    return (module) => cb(null, module.default); 
} 

const routes = { 
    component: App, 
    childRoutes: [ 
     { 
      path: "/", 
      component: Home 
     }, 
     { 
      path: "/hello/:foo", 
      getComponent(location, cb) { 
       System.import('./components/hello.jsx') 
        .then(loadRoute(cb)) 
        .catch(errorLoading); 
       } 
     }, 
    ] 
}; 

export default() => <Router history={hashHistory} routes={routes} /> 

Wie Sie das sehen "/ hallo /: foo" Route ist async.

Wie kann ich den Zugriff auf diese Route (rollenbasiert) beschränken und an einen anderen Ort weiterleiten (z. B. Login)?

Ich möchte den Chunk nur laden, wenn es benötigt wird.

Sollte ich den Prüfcode in "getComponent()" platzieren?

Kann es mit "willTransitionTo()" gemacht werden, wird diese Funktion vor "getComponent()" ausgeführt und wie soll ich es implementieren?

Answer 1

Ich würde den Prüfcode in componentWillMount() platzieren, und in render() die Seitenkomponente zurückgeben, oder display/redirect zur Anmeldung.

Wenn Sie mehrere Seiten haben, die Zugriff eingeschränkt benötigen, würde ich eine High-Level-Komponentenreihenfolge für jede Seitenkomponente erstellen, um den Zugriff vor dem Rendern zu überprüfen.