Reactでログインを処理する基本的な方法

Question

私はcreate-react-appを使ってクライアント側のアプリケーションを開発しています。アプリケーションは、基本的なフォームでログインコンポーネントをレンダリングし、ログインに成功すると、別のコンポーネント（メインアプリケーションになる）をロードします。

まず、の検証とログインロジックは問題にはなりません。まず、ログインコンポーネントをマウント解除し、送信イベントで別のコンポーネントをロードする簡単な方法を見つけようとしているからです。提出したイベントに（私はこの例ではMain.jsと呼ばれる）別のコンポーネントに切り替えるための最も簡単な方法だろう何

class Login extends Component { 

    handleLogin(){ 
     // trigger to load Main.js 
    } 

    render() { 
     return (
      // form elements here 

      <div className="submit"> 
       <input className="button-signin" value="Sign In" type="submit" 
        onClick={this.handleLogin}/> 
       </div> 
      ); 
    } 
} 

？

Answer 1

React routerを試しましたか？ルートを定義し、それぞれにコンポーネントを割り当てるのは簡単です。次に、各ルートにアクセスするための条件を設定することもできます。 There is an example in the official docsあなたの要件に合っているようです。

<Router history={withExampleBasename(browserHistory, __dirname)}> 
<Route path="/" component={App}> 
    <Route path="login" component={Login} /> 
    <Route path="logout" component={Logout} /> 
    <Route path="about" component={About} /> 
    <Route path="dashboard" component={Dashboard} onEnter={requireAuth} /> 
</Route> 

方法requireAuthは、あなたが（コンポーネントDashboardが表示されます）ルートdashboardにアクセスしようとするたびにチェックされます。トークンベースの認証を使用している場合は、トークンをlocalStorageに保存し、それがrequireAuthに存在するかどうかを確認することができます。

handleLoginあなたのメソッドhandleLoginは、バックエンドを呼び出し、ログインを処理する場合はlocalStorageにトークンを格納してから、ダッシュボードルートにリダイレクトします。