React - Auth funktioniert nicht wegen der Reihenfolge der Brennfunktionen

Question

Der Versuch, Authentifizierung mit React zu tun. In meiner Login.js-Datei habe ich meine handleClick-Funktion, die json (verwendet mit Sitzungsspeicher) und eine Übermittlungsschaltfläche mit einem Link-Container abruft. Jetzt in meiner index.js Datei habe ich eine requireAuth Funktion mit replace. Mein Problem ist, dass die Funktion requireAuth vor meinem handleClick ausgelöst wird. Wie kann ich es nach meinem handleClick auslösen lassen, damit handleClick überprüft, ob der Benutzername und das Passwort erfolgreich sind, bevor der Benutzer angemeldet wird? Im Moment wird es mich nur nicht auf die nächste Seite bringen. Codebeispiele werden geschätzt. Ich benutze React Router v3.

Login.js:

handleClick() { 

    fetch('/backend/login', { 
     method: 'POST', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
     }, 
     body: JSON.stringify({ 
      username: this.state.username, 
      password: this.state.password 
     }) 
    }) 
    .then(response =>{ 
     if (response.ok) { 
      response.json().then(data => { 
       sessionStorage.setItem('loggedIn', data.success); 
       console.log('login success: ' + sessionStorage.getItem('loggedIn')); 
      }); 
     } 
     else { 
      console.log('failed'); 
     } 
    }) 
} 

render() { 
    <LinkContainer to='/Dashboard'> 
    <Button onClick={this.handleClick} type="submit"> Submit /> 
    </Button> 
    </LinkContainer> 
} 

index.js:

function requireAuth(nextState, replace) { 
if (!(sessionStorage.getItem('loggedIn') === true)) { 
    console.log(sessionStorage.getItem('loggedIn')); 
     replace({ 
     pathname: '/', 
     state: { nextPathname: nextState.location.pathname } 
    }); 
} 
} 

ReactDOM.render(
<Router history={browserHistory}> 
    <Route path="/" component={Container}> 
     <IndexRoute component={Homepage}/> 
     <Route path="dashboard" component={Dashboard} onEnter= 
{requireAuth}/> 
    </Route> 
</Router> 

Answer 1

Statt <LinkContainer to='/Dashboard'> zu verwenden, müssen nur die Taste, um die onCLick Funktion. Wenn die Antwort von der Anmeldung erfolgreich ist, verwenden Sie den Reaktiv-Router push, um den Benutzer wie unten beschrieben zur "Dashboard" -Route zu senden.

import { browserHistory } from 'react-router'; browserHistory.push('/some/path');