ログイン後にログアウトするためのログインリンクを変更する

Question

私は、私のヘッダーとログインフォームが異なるコンポーネントであるリアクションサイトを作成しています。

Answer 1

あなたはコードでファイル 'golbal_emitter.js' を作成するには、グローバル持つEventEmitter

https://github.com/facebook/emitter

を使用することができます：あなたのコンポーネントで次に module.exports = new EventEmitter();

：（componentDidMount中）

ヘッダー： var emitter = require 'global_emitter'; emitter.addListener('afterLogin', function() {});

ログインコンポーネント（成功ログイン後）： var emitter = require 'global_emitter'; emitter.emit('afterLogin');

Answer 2

最近似たようなことをしました。

簡単な解決策は、sessionStorageとreduxを使用することです。

jwtトークンをsessionStorageに格納し、レンダリングするたびにその存在を確認する必要があります（例：onComponentWillMount）。ログインしている場合は、「logged_in」状態を更新するアクションをディスパッチします。 Headerコンポーネントはlogged_in状態に従ってレンダリングされます。私達にあなたのコードを表示

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> 
    ); 
    } 
    } 
}