Question

我正在创建一个网站，其中我的标题和登录表单是不同的组件。我想在登录后，标题中的登录链接更改为注销。

Answer 1

我最近做了类似的事情。

一个简单的解决方案是使用sessionStorage和redux。

您需要在sessionStorage中存储jwt标记，并在每次渲染时检查它的存在（例如通过onComponentWillMount）。如果已登录，则调度操作以更新“logged_in”状态。 Header组件将根据logged_in状态进行渲染。

My Header Component看起来像这样：

class Header extends React.Component {  
  componentWillMount() {
    if (sessionStorage.getItem('jwt'))
      this.props.loginSuccess();
  }

  render() {
    console.log("logged_in: ", this.props.logged_in);

    if (this.props.logged_in) {
      return (
        <nav>
          <NavLink to="/" 
            activeClassName="active">Home</NavLink>
          {" | "}
          <Link to="/products" activeClassName="active">Products</Link>
          {" | "}
          <a href="/logout">log out</a>
        </nav>
      );
    } else {
      return (
        <nav>
          <NavLink to="/" 
            activeClassName="active">Home</NavLink>
          {" | "}
          <Link to="/login" activeClassName="active">
            log in</Link>
        </nav>
      );
    }
  }
}

Answer 2

您可以使用全局EventEmitter

https://github.com/facebook/emitter

创建文件＆＃39; golbal_emitter.js＆＃39;用代码： module.exports = new EventEmitter();

然后在你的组件中：

标题（在componentDidMount中）： var emitter = require 'global_emitter'; emitter.addListener('afterLogin', function() {});

在登录组件中（成功登录后）： var emitter = require 'global_emitter'; emitter.emit('afterLogin');

登录后，重新更改登录链接以注销

2 个答案: