レスポンスのミドルウェアとしての認証コンポーネント

Question

ログインしたユーザーのみがホームページとタスクページにアクセスできるようにするにはどうすればよいですか？私はreduxを使用しています。私はauthについてより良く学ぶために事前に作られた認証コンポーネントを避けようとしています。

const App = props => (
    <BrowserRouter> 
     <Provider store={store}> 
      <div className="app"> 
       <Layout> 
       <Header> 
        <Navbar /> 
       </Header> 
       <Content> 
        <Route exact path='/' component={Home} /> 
        <Route exact path='/login' component={Login} /> 
        <Route exact path='/signup' component={Signup} /> 
        <Route exact path='/task/:id' component={Task} /> 
       </Content> 
       </Layout> 
      </div> 
     </Provider> 
    </BrowserRouter> 
) 

私は角度を使用していましたが、ルートにミドルウェアの概念がありましたが、反応すると私は迷子になりました。 authはreduxの店とは関係ないと思いますか？ユーザーがアプリをナビゲートするときにAPIからユーザー詳細を取得するために呼び出す必要がありますか？

Answer 1

この問題を解決するために、上位コンポーネントを使用してルートアプリケーションルートをラップして使用しました。私たちのルート構造はちょっと違っていましたが、どんなルートでも同じコンセプトを使うことができる "保護された"必要があります。

上位コンポーネントは、コンポーネントの機能を単に「拡張」します。 Reduxの connectはHOCです。この場合、拡張機能は認証をチェックすることになります。同じようHOCをインポートし、あなたのルートファイルで

import React from 'react' 

export default function(ComposedComponent) { 

    class RequireAuth extends Component { 

    state = { 
     isAuthenticated: false 
    } 

    // Push to login route if not authenticated on mount 
    componentWillMount() { 
     if(!this.state.authenticated) { 
     // Use your router to redirect them to login page 
     } 
    } 

    // Push to login route if not authenticated on update 
    componentWillUpdate(nextProps) { 
     if(!this.state.authenticated) { 
     // Use your router to redirect them to login page 
     } 
    } 

    // Otherwise render the original component 
    render() { 
     return <ComposedComponent {...this.props}/> 
    } 

    } 

    return RequireAuth 

} 

：ときにコンポーネントマウント、あなたはそうのような新しいコンポーネントファイルを作成しなど、サーバーまたはのlocalStorageをチェックするかどうか、認証のための小切手を作りたいと思いますRequireAuthまたは類似のものなどのように使用します。

<Route exact path='/' component={RequireAuth(Home)} /> 

これは、多かれ少なかれ、次ん。それはルート・コンポーネントをレンダリングしようとしたとき、ルータがホームルートに当たると、それはRequireAuthチェックを実行します。 RequireAuthは、設定した認証の種類を確認し、isAuthenticatedの状態をtrueに設定する必要があります。それが本当でないなら、それはあなたのログインルートかそれに類するものにリダイレクトするべきです。 connectこのHOCを還元して、isAuthenticated状態をコンポーネントの状態ではなくストアに保存することもできます。