react/reduxの認証ワークフロー

Question

私はreact、react-router、およびreduxを使用して新しいフロントエンドプロジェクトを設定しようとしていますが、うまく動作し、多くのページで動作するログインワークフローを設定することに悩まされています。ここで

は、私が持っているしたいロジックです：

1. は、私がログインしたりないよ場合と言うReduxのストア内の変数を持っています。簡略化すると、logged: true/falseがあるとします。
2. ログインページからloggedがtrueに設定されている場合、リダイレクトされたページにリダイレクトするか、定義されていない場合は/にリダイレクトします。前の場所はnextPathnameに格納されています。
3. authが必要なコンポーネントでloggedがfalseに設定されている場合は、/にリダイレクトします。

このワークフローの主な問題は、アクションを送信し（ログに記録された値を設定して）、リダイレクトしたいということです。

1. チェックlogged==trueもし私のログイン・コンポーネントのcomponentWillReceivePropsで、それはケースだ場合リダイレクト：ここ
   は、私が調査してきたいくつかの選択肢があります。これはログインワークフローでうまくいきますが、ログアウトコンポーネントのロジックを実装する必要がある場合は、認証が必要なコンポーネントごとに行う必要があります。 （ミックスはES6の反応コンポーネントのおかげでうまくいかない...）。
2. ミドルウェアのリダイレクトを処理します。アクションがログインに関するものである場合、アクションを実行してからリダイレクトします。しかし、これがベストプラクティスかどうかは分かりません。

私の質問は、どのように私は制限されているすべてのページであまりにも多くのオーバーヘッドなしで認証作業を行うのですか？

コードのビットは：

app.js：

function requireAuth(nextState, replace) { 
    if(store.getState().Login.logged === false) { 
     replace({ 
      pathname: "/login", 
      state: { nextPathname: nextState.location.pathname } 
     }); 
    } 
} 
const history = syncHistoryWithStore(browserHistory, store); 
ReactDOM.render(
    <Provider store={store}> 
     <Router history={history}> 
      <Route path="/" component={Archives} onEnter={requireAuth}></Route> 
      <Route path="/login" component={LoginComponent}></Route> 
     </Router> 
    </Provider>, 
    document.getElementById("app") 
); 

LoginComponent：

class LoginComponent extends React.Component<LoginProps, any> { 
    componentWillReceiveProps(newProps) { 
     if(newProps.logged) { 
      let nextPath = "/"; 
      const {location, history} = newProps; 
      if (location.state && location.state.nextPathname) { 
       nextPath = location.state.nextPathname; 
      } 
      history.pushState({}, nextPath); 
     } 
    } 
    render() { 
     return <div>This is a login form</div> 
    } 
} 

Answer 1

あなたは、私は信じて、これにアプローチしたいと思うようにして、使用することですユーザーがアクセスするために認証する必要があるコンポーネントをラップするために、「RequireAuth」上位コンポーネント。ここにそのような例があります。クライアントフォルダ内の認証コンポーネントに注意してください。https://github.com/joshuaslate/mern-starter