web-dev-qa-db-ja.com

Reactルーターを介して設定されたルートからReduxストアにアクセスする

制限されたルートに入るときにユーザーに認証を促すために、react-routerのonEnterハンドラーを使用したいと思います。

これまでのところ、私の_routes.js_ファイルは次のようになります。

_import React from 'react';
import { Route, IndexRoute } from 'react-router';

export default (
    <Route   path="/"         component={App}>
      <IndexRoute             component={Landing} />
      <Route path="learn"     component={Learn} />
      <Route path="about"     component={About} />
      <Route path="downloads" component={Downloads} onEnter={requireAuth} />
    </Route>
)
_

理想的には、requireAuth関数を、ストアと現在の状態にアクセスできるreduxアクションにしたいと思います。これはstore.dispatch(requireAuth())のように機能します。

残念ながら、このファイルのストアにはアクセスできません。この場合、実際に connect を使用して、必要な関連アクションにアクセスできるとは思わない。また、ストアが作成されたファイルから_import store_を実行することもできません。これは、アプリが最初にロードされたときは未定義であるためです。

javascriptreactjsreact-routerredux
38
robinnnnn

これを達成する最も簡単な方法は、（ルートを直接返すのではなく）ルートを返す関数にストアを渡すことです。この方法で、onEnterおよび他のリアクションルーターメソッドでストアにアクセスできます。

ルートの場合：

import React from 'react';
import { Route, IndexRoute } from 'react-router';

export const getRoutes = (store) => (
  const authRequired = (nextState, replaceState) => {
    // Now you can access the store object here.
    const state = store.getState();

    if (!state.user.isAuthenticated) {
      // Not authenticated, redirect to login.
      replaceState({ nextPathname: nextState.location.pathname }, '/login');
    }
  };

  return (
    <Route   path="/"         component={App}>
      <IndexRoute             component={Landing} />
      <Route path="learn"     component={Learn} />
      <Route path="about"     component={About} />
      <Route path="downloads" component={Downloads} onEnter={authRequired} />
    </Route>
  );
)

次に、メインコンポーネントを更新してgetRoutes関数を呼び出し、ストアに渡します。

<Provider store={ store }>
  <Router history={ history }>
    { getRoutes(store) }
  </Router>
</Provider>

requireAuthからアクションをディスパッチするには、次のように関数を記述できます。

const authRequired = (nextState, replaceState, callback) => {
  store.dispatch(requireAuth())  // Assume this action returns a promise
    .then(() => {
      const state = store.getState();

      if (!state.user.isAuthenticated) {
        // Not authenticated, redirect to login.
        replaceState({ nextPathname: nextState.location.pathname }, '/login');
      }

      // All ok
      callback();
    });
};

お役に立てれば。

56
Ashley 'CptLemming' Wilson

必要に応じて、次のようにroute.jsを記述できます。

var requireAuth = (store, nextState, replace) => {
  console.log("store: ", store);
  //now you have access to the store in the onEnter hook!
}

export default (store) => {
  return (
      <Route path="/"           component={App}>
        <IndexRoute             component={Landing} />
        <Route path="learn"     component={Learn} />
        <Route path="about"     component={About} />
        <Route path="downloads" component={Downloads} onEnter={requireAuth.bind(this, store)} />
      </Route>
    );
);

この codepen で遊ぶことができる例をセットアップしました。

認証を処理するためにアクションをトリガーすることは良い考えかどうかわかりません。個人的には、別の方法で認証を処理することを好みます：

onEnterフックを使用する代わりに、ラッピング関数を使用します。ブログの管理セクションを保護したいので、ルートのAdminContainerコンポーネントを関数requireAuthenticationでラップしました。以下を参照してください。

export default (store, history) => {
        return (
            <Router history={history}>
                <Route path="/" component={App}>
                    { /* Home (main) route */ }
                    <IndexRoute component={HomeContainer}/>
                    <Route path="post/:slug" component={PostPage}/>
                    { /* <Route path="*" component={NotFound} status={404} /> */ }
                </Route>

                <Route path="/admin" component={requireAuthentication(AdminContainer)}>
                    <IndexRoute component={PostList}/>
                    <Route path=":slug/edit" component={PostEditor}/>
                    <Route path="add" component={PostEditor}/>
                </Route>
                <Route path="/login" component={Login}/>
            </Router>
        );
    };

requireAuthenticationは次の関数です

  • ユーザーが認証された場合、ラップされたコンポーネントをレンダリングし、
  • それ以外の場合は、Loginにリダイレクトします

以下をご覧ください。

export default function requireAuthentication(Component) {
    class AuthenticatedComponent extends React.Component {

        componentWillMount () {
            this.checkAuth();
        }

        componentWillReceiveProps (nextProps) {
            this.checkAuth();
        }

        checkAuth () {
            if (!this.props.isAuthenticated) {
                let redirectAfterLogin = this.props.location.pathname;
                this.context.router.replace({pathname: '/login', state: {redirectAfterLogin: redirectAfterLogin}});
            }
        }

        render () {
            return (
                <div>
                    {this.props.isAuthenticated === true
                        ? <Component {...this.props}/>
                        : null
                    }
                </div>
            )

        }
    }

    const mapStateToProps = (state) => ({
        isAuthenticated: state.blog.get('isAuthenticated')
    });

    AuthenticatedComponent.contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    return connect(mapStateToProps)(AuthenticatedComponent);
}

また、requireAuthenticationは/adminの下のすべてのルートを保護します。そして、好きな場所で再利用できます。

12
Alex Chirițescu

時間の経過とともにロットが変化しました。 onEnterはreact-router-4に存在しなくなりました

以下は参考のために私の実際のプロジェクトからのものです

export const getRoutes = (store) => {
  const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
      checkIfAuthed(store) ? (
        <Component {...props}/>
      ) : (
        <Redirect to={{
          pathname: '/login'
        }}/>
      )
    )}/>
  )

  return (
    <Router>
      <div>
        <PrivateRoute exact path="/" component={Home}/>
        <Route path="/login" component={Login} />
      </div>
    </Router>
  )
}
4
catsky