Globale Tracking-Methode, wenn der Benutzer in React angemeldet ist?

Question

Viele meiner Komponenten ändern, wie sie sich verhalten, wenn der Benutzer angemeldet ist oder nicht.

Der Benutzer ist angemeldet, wenn der lokale Speicher über ein gültiges JWT-Token verfügt.

Ich kann einen 'isLoggedIn' Boolean zu den Zuständen aller Komponenten hinzufügen, die sich darum kümmern und es initialisieren, aber dies führt zu einer Menge Redundanz.

Gibt es eine Möglichkeit, eine globale Stütze oder einen globalen Zustand zu haben, auf den alle Komponenten leicht zugreifen können, um sich darum zu kümmern? Vielleicht hätte ich auch in der Zukunft über 'isLoggedIn' hinaus andere Informationen über den Benutzer wie Benutzernamen und Dinge?

Answer 1

Ich habe ziemlich ähnliche Anforderungen in einem meiner Projekte.

store.dispatch(tryAuthenticateFromToken()); 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={browserHistory} /> 
    </Provider>, 
    document.getElementById('root') 
); 

Meine Lösung besteht darin, ein Anmeldeereignis kurz vor dem Rendern an den Store zu senden. Sie könnten etwas ähnliches tun.

Dann in einem Reducer analysieren dieses Ereignis und speichern Sie das Token irgendwo in Ihrem Geschäft. Danach können Sie es wie jede andere Variable aus dem Geschäft verwenden und es an die entsprechenden Komponenten übergeben, um basierend auf dem Anmeldestatus unterschiedlich zu rendern.

Answer 2

Ich weiß nicht redux und ich versuche, reender der App so zu erzwingen, wenn Sie mir über mögliche Fallstricke dieser Lösung erzählen können, würde ich mich freuen, es zu hören!

class App extends React.Component { 
 

 
    constructor(props){ 
 
    super(props); 
 

 
    this.updateCurrentUser = this.updateCurrentUser.bind(this) 
 

 
    this.state = { 
 

 
     currentUser:new CurrentUser(this.updateCurrentUser) 
 

 
    } 
 
    this.logUser = this.logUser.bind(this) 
 
    } 
 

 
    render() { 
 

 
    return (
 

 
     <div> 
 

 
     <h4>{"User is logged " + (this.state.currentUser.isLoggedIn()?'in':'out')}</h4> 
 
     <button onClick={this.logUser}>Log in</button> 
 
     </div> 
 

 
    ); 
 

 

 
    } 
 
    
 
    logUser(){ 
 
    
 
    this.state.currentUser.logIn(); 
 
    
 
    } 
 

 
    updateCurrentUser(currentUser){ 
 

 
    this.setState({ 
 

 
     currentUser:currentUser 
 

 
    }) 
 

 
    } 
 

 
    getCurrentUser(){ 
 

 
    return this.state.currentUser 
 

 
    } 
 

 
} 
 

 
class CurrentUser { 
 

 
    constructor(onChange){ 
 
    
 
    this._isLoggedIn = false; 
 
    this.onChange = onChange 
 
    this.logIn = this.logIn.bind(this); 
 
    } 
 

 
    /** 
 
    * Log user into the web app 
 
    * @param {string} email 
 
    * @param {string} password 
 
    * @param {function} success callback 
 
    * @param {function} fail  callback 
 
    * @return {void} 
 
    */ 
 
    logIn(){ 
 

 
    //fake request 
 
    setTimeout(()=>{ 
 
    
 
     this.setProperty('_isLoggedIn',true) 
 
    
 
    },1500) 
 

 
    } 
 

 
    isLoggedIn(){ 
 

 
    return this._isLoggedIn === true 
 

 
    } 
 
    
 
    setProperty(propertyName,value){ 
 

 
    this[propertyName] = value 
 
    // update func passed from app 
 
    // updates app state 
 
    this.onChange(this) 
 
    } 
 

 
} 
 

 
ReactDOM.render(<App />,document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>