erstellen "Gated" reagieren Komponenten

Question

so habe ich eine App, die Reflux Router verwendet und ich möchte nur Admin-Bereiche in der App erstellen. Was ich versuche zu erreichen ist, wenn ein Benutzer zu einem Gated - Teil der App geht, dass ein Teil der App einen API - Aufruf durchführt, um zu überprüfen, ob der Benutzer berechtigt ist, auf diese Komponente zuzugreifen (über ein Token, das auf der Server) und wenn sie nicht autorisiert sind, leitet sie sie an die Login-Komponente um.

aber ich habe in ein Rätsel mit Best Practices in reagieren. Reagieren sagt, dass Ajax (oder in diesem Fall ein API-Aufruf) sollte in componentDidMount statt componentWillMount getan werden, aber von meinem Verständnis über die Reaktion Lebenszyklus, wenn ich ihre Best Practice dann die Komponente würde/könnte gerendert werden, bevor der Benutzer ist authentifiziert, was extrem unerwünscht ist, insbesondere wenn die Serverlatenz nicht schnell genug ist.

Was ist der beste Weg, um so etwas innerhalb reagieren zu handhaben?

Answer 1

Sie müssen die Ajax-Anforderung für die genaue Komponente, die Sie anzeigen möchten, nachdem das Token genehmigt wurde, nicht ausführen. Dies kann eine beliebige Komponente sein, beispielsweise eine Komponente, die die privaten Informationen umschließt.

class AuthWrapper extends Component { 
    componentDidMount() { 
    ajax(url).then(token => { 
     if (token) this.setState({ token }) 
     else redirect() 
    }) 
    } 

    render() { 
    return (
     <div> 
     {this.state.token && this.props.children} 
     {!this.state.token && <div>Fetching...</div>} 
     </div> 
    ) 
    } 
} 

Dann woanders:

<AuthWrapper> 
    <YourPrivateComponent /> 
<AuthWrapper>