web-dev-qa-db-ja.com

リダイレクトを動的にreact-routerに追加するにはどうすればよいですか？

認証されていないユーザーが使用できるはずのサインインコンポーネントがあります。そして認証直後、このコンポーネントは利用できなくなります。

   var routes = (
      <Route handler={App}>
        <Route name="signIn" handler={signIn}/>
        {/* redirect, if user is already authenticated */}
        { localStorage.userToken ? (
            <Redirect from="signIn" to="/user"/>
          ) : null
        }
      </Route>
    );

Router.run(routes, (Handler, state) => {
  React.render(<Handler {...state}/>, document.getElementById('main'));
});

このコードは、ユーザーが認証後に何らかの理由でwebappをリロードした場合は完璧に機能しますが、もちろん、ユーザーがwebappをリロードしなかった場合は機能しません。 SignUpコンポーネントに対してthis.context.router.transitionToを使用しようとしましたが、うまくいきません。コンポーネントがレンダリングされ、このスクリプトが実行されます。

したがって、コンポーネントをレンダリングすることさえせずに、ルーターをリダイレクトさせるために、ルート変数に直接リダイレクトを追加したいと思います。

reactjsfluxreact-router
13
stkvtflw

認証フローをチェックして特定のルートを条件付きでレンダリングする代わりに、別のアプローチをお勧めします。

React-router 0.13.xを使用している場合、認証を確認する必要がある場合は、コンポーネントで willTransitionToメソッド を使用することをお勧めします。ハンドラーがレンダリングしようとしているときに呼び出され、遷移を中止またはリダイレクトする機会を与えます（この場合、ユーザーが認証されているかどうかを確認し、認証されていない場合は別のパスにリダイレクトします）。こちらのauth-flowの例を参照してください。 https://github.com/ReactTraining/react-router/blob/v0.13.6/examples/auth-flow/app.js

バージョン> 0.13.xの場合、それは onEnter および Enterhooks になります。こちらのauth-flowの例をご覧ください： https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js

基本的に、auth-checkフローをroutes変数から移行イベント/フックに移動します。ルートハンドラーが実際にレンダリングされる前に、認証を確認し、ユーザーを別のルートにリダイレクトします。

23
trekforever