全球跟踪用户是否登录React的方法？

Question

我的很多组件会根据用户是否登录而改变他们的行为方式。

当本地存储具有有效的jwt令牌时，用户已登录。

我可以在关注此事件的所有组件的状态中添加'isLoggedIn'布尔值并初始化它，但这会引入大量冗余。

有没有办法拥有一个全局道具或状态，所有组件都可以轻松访问以解决这个问题？也许即使在'isLoggedIn'之后的未来，我还会提供有关用户的其他信息，例如用户名和内容？

Answer 1

我的一个项目中有非常相似的要求。

store.dispatch(tryAuthenticateFromToken());

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

我的解决方案是在渲染之前将登录事件发送到商店。 你可以做类似的事情。

然后在reducer中解析该事件并将令牌保存在商店的某个位置。 之后，您可以将其用作商店中的任何其他变量，并将其传递给相应的组件，以根据登录状态进行不同的渲染。

Answer 2

我不知道redux和我试图强迫这个应用程序重新渲染，如果你能告诉我这个解决方案的潜在缺陷我会很高兴听到它！

＆＃13;

＆＃13;

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'))

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;