3

私は自分のアプリケーションでReactJSandを使用react-routerしています。次のことを行う必要があります。ユーザーがページを開いたときに、ログインしているかどうかを確認し、ログインしている場合はページにリダイレクトし/authます。私は次のことをしています：

componentWillMount: function() {
    if (sessionStorage["auth"] == null) {
        this.transitionTo("/auth");
    }
},

ブラウザの URL では、実際に にリダイレクトし/auth、ページをレンダリングしてから、/auth現在のコンポーネントでオーバーライドします。ここで質問: 現在のコンポーネントのレンダリングをキャンセルする方法、または他の方法でリダイレクトを行う方法は? ありがとう。

4

1 に答える 1

0

反応ルーターの例 auth-with-shared-root を見てみましょう: https://github.com/rackt/react-router/tree/master/examples/auth-with-shared-root

彼らが基本的にやっていることは、どこへ行くべきかルートの入り口をチェックすることです。ファイルの 36、51、89config/routes.js行目を見てください。

{ onEnter: redirectToLogin,
      childRoutes: [
        // Protected nested routes for the dashboard
        { path: '/page2',
          getComponent: (location, cb) => {
            require.ensure([], (require) => {
              cb(null, require('../components/PageTwo'))
            })
          }
        }
        // other protected routes...
     ]
}

このルートは、ルート/page2が入力またはプッシュされると、redirectToLogin 関数を呼び出します。関数は、ユーザーが認証されているかどうかを確認できますauth.loggedIn()

function redirectToLogin(nextState, replace) {
  if (!auth.loggedIn()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname }
    })
  }
}

ユーザーがログインしていない場合、関数は/loginユーザーが自身を認証できる へのルートを置き換えます。

于 2016-01-08T16:21:39.300 に答える