3

私はreactjs、redux、およびreact-router（redux-simple-router）に基づいてWebサイトを構築していますが、ユーザーが認証されているかどうかに応じてルートパスを共有する方法を理解するのに苦労しています。

私はこの例を探していましたhttps://github.com/reactjs/react-router/tree/master/examples/auth-with-shared-rootですが、正直言ってうまくいきませんでした。

私は2つの異なるレイアウトを持っています。1 つ目はパブリック レイアウトで、ユーザーが認証されていない場合に表示されます。ここから、ログインページと登録にアクセスできます。

ユーザーが認証された後、完全に異なるレイアウトである内部アプリを表示したいのですが、同じルート URL で実行します。

例: http://example.com/

ユーザーが認証されていない場合:

<Route path='/' name='homepage' component={SiteLayout}>
  <IndexRoute component={HomeView} />
  <Route path='/login' name='login' component={LoginView} />
  <Route path='/join' name='join' component={RegistrationView} />
  <Route path='/404' component={NotFoundView} />
  <Redirect from='*' to='/404' />
</Route>

認証後、同じルート URL を保持します。

<Route path='/' name='feeds' component={InternalLayout}>
  <IndexRoute component={FeedsView} />
  <Route path='/profile' name='login' component={ProfileView} />
  <Route path='/settings' name='join' component={SettingsView} />
  <Route path='/search' name='join' component={SearchView} />
</Route>

フェイスブックと同じです。

私の質問は (そして、例を提供できれば素晴らしいことです): 認証ステータスに応じて、同じ URL で異なるレイアウトをレンダリングするにはどうすればよいですか?

PD: メソッド hasToken を使用して、認証ステータス (JWT) を格納する Token クラスがあります。

この例では JSX 構文を使用していますが、目的の結果を得るために構成構文に切り替える必要があるかどうかはわかりません。

どんな助けでも大歓迎です。

4

2 に答える 2

2

これにアプローチする 1 つの方法は、オブジェクト リテラル形式を使用することです。ルートルートを収容する追加のコンポーネントを作成する必要があります。派手なものである必要はありません。

<div>{this.props.children}</div>

(例: App) で実行すると、ルートは次のようになります。

const redirectToLogin = (nextState, replace) => {
  if (isLoggedIn()) {
    replace('/login')
  }
}

const routes = {
    component: App,
    childRoutes: [
    {
        path: '/',
        getComponent(location, cb) {
            return isLoggedIn() ? cb(null, InternalLayout) : cb(null, SiteLayout);
        },
        indexRoute: { 
            getComponent: (location, cb) => {
                return isLoggedIn() ? cb(null, FeedsView) : cb(null, HomeView);
            }
        },
        childRoutes: [
            // Your not authenticated views under SiteLayout
            { path: '/login', component: 'LoginView'},
            { path: '/join', component: 'RegistrationView'},
            // etc.
            {
                // if not logged in, redirect to login page, once the user logs in, they'll be redirected to the childroute 
                onEnter: redirectToLogin,
                childRoutes: [
                    // Your authenticated views under FreedsView
                    { path: '/profile', component: 'ProfileView'},
                    { path: '/settings', component: 'SettingsView' },
                    // etc.
                ]
            }
        ]
    }
    ]
}

これが役立つことを願っています。

于 2016-02-15T18:35:44.943 に答える
0

ユーザーがログインしていない場合は HomeView を表示し、ユーザーが認証されている場合は FeedsView を表示する新しいコンポーネントを作成できます。

だからあなたは持っています： 

<IndexRoute component={RootComponent} />

そして RootComponent は次のようにする必要があります:

render() {
  ...
  var child = (hasToken)?FeedsView:HomeView
  return (
    <div>
      {child}
    </div>
  )
}
于 2016-02-12T07:16:53.780 に答える