React Router, wie Übergang zu speichern und Redirect bei erfolgreicher Anmeldung

Question

Ich möchte den Benutzer auf die Anmeldeseite umleiten, sie versuchen, auf einen Endpunkt zuzugreifen, der Authentifizierung erfordert, aber ich möchte die Seite, auf die sie zugegriffen haben, einmal zu speichern sie loggen sich ein, ich kann sie auf diese Seite umleiten. In den älteren Versionen von Router reagieren, ich glaube, Sie in der Lage waren, dies zu tun, einen Wrapper (Beispiel aus auth0 genommen) mit:

export default (ComposedComponent) => { 
    return class AuthenticatedComponent extends React.Component { 

    static willTransitionTo(transition) { 
     // This method is called before transitioning to this component. If the user is not logged in, we’ll send him or her to the Login page. 
     if (!LoginStore.isLoggedIn()) { 
     transition.redirect('/login', {}, {'nextPath' : transition.path}); 
     } 
    } 

    ... 

    } 
} 

Und dann in der Aktion, die auf erfolgreiche Authentifizierung mit der API aufgerufen wird:

loginUser: (jwt) => { 
    var savedJwt = localStorage.getItem('jwt'); 

    AppDispatcher.dispatch({ 
     actionType: LOGIN_USER, 
     jwt: jwt 
    }); 

    if (savedJwt !== jwt) { 
     var nextPath = RouterContainer.get().getCurrentQuery().nextPath || '/'; 

     RouterContainer.get().transitionTo(nextPath); 
     localStorage.setItem('jwt', jwt); 
    } 
    } 

ich weiß, dass in dem neuen Router API reagiert, kann der erste Teil mit

router.push({ pathname, query, state }) 

jedoch getan werden, wo ist der Ort, um den Zustand zugreifen (in diesem Fall nextPath)? Ich glaube, die getCurrentQuery Funktion auf dem Router ist veraltet

Answer 1

Verwenden Sie onEnter Haken in der Route-Definition (demo).

Die Anmeldeseite sollte einen Verweis auf den Router in den Requisiten enthalten (mit reac-router withRouter HoC). Darüber hinaus sollte die Lage prop die benötigten Daten enthalten, um den ursprünglichen Speicherort umleiten zurück:

const Login = withRouter(({ router, location }) => (
    <div> 
    <button type="click" onClick={() => { 
     LoginStore.logIn(); 
     router.replace(location.state); // on login redirect back to the original location, by taking that location's details from the router state 
     }}>Click to Login</button> 
    </div> 
)); 

Der Login onEnter Handler auf die Login-Seite umleiten soll, und übergeben Sie die ursprüngliche Seite Details (nextState) in der Lage Zustand:

const redirectToLogin = (nextState, replace) => { 
    if (!LoginStore.isLoggedIn()) { 
     const { pathname, search, query, state } = nextState.location; 
     replace({ pathname: '/login', state: { pathname, search, query, state } }); 
    } 
}; 

hinzufügen onEnter={ redirectToLogin } zu Routen, die eine Anmeldung erfordern:

ReactDOM.render((
    <Router> 
    <Route path="/" component={MainLayout}> 
     <IndexRoute component={Home} /> 
     <Route path="login" component={Login} /> 
     <Route path="page1" component={Page1} onEnter={ redirectToLogin } /> 
     <Route path="page2" component={Page2} onEnter={ redirectToLogin } /> 
    </Route> 
    </Router> 
), document.getElementById('root'))