如何使用reactjs，redux和redux-simple-router根據auth狀態共享根URL？

我正在構建一個基於reactjs，redux和react-router（redux-simple-router）的網站，而且我很難理解如何根據用戶的身份驗證來共享根路徑。如何使用reactjs，redux和redux-simple-router根據auth狀態共享根URL？

我正在看這個例子https://github.com/reactjs/react-router/tree/master/examples/auth-with-shared-root，但說實話，我無法得到它的作品。

我有兩種不同的佈局。第一個是公共佈局，當用戶沒有通過驗證時顯示。從這裏您可以訪問登錄頁面和註冊。

用戶獲得認證後，我想向他展示內部應用程序，這是一個完全不同的佈局，但在同一個根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>

它就像Facebook一樣。

我的問題是（和如果你可以提供一個例子，它會很棒）：根據身份驗證狀態，我如何在同一個URL下呈現不同的佈局？

PD：我有一個令牌類，我在那裏存儲身份驗證狀態（JWT），方法hasToken。

在這個例子中，我使用的是JSX語法，我不知道是否必須切換到配置語法來獲得所需的結果。

任何幫助表示讚賞。

來源

2016-02-12 Alberto Menendez Romero

一種方法是使用對象文本形式。您需要創建一個額外的組件來加入您的根路由。它並不需要是任何幻想，一個

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

會做（例如應用程序），然後路由看起來是這樣的：

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-15 18:35:44 George

謝謝。這正是我所期待的。 –

如果用戶未登錄，您可以創建一個顯示HomeView的新組件，如果用戶已通過身份驗證，則可以創建FeedsView。

所以，你必須：

<IndexRoute component={RootComponent} />

而且RootComponent應該這樣做：解決這個

render() { 
    ... 
    var child = (hasToken)?FeedsView:HomeView 
    return (
    <div> 
     {child} 
    </div> 
) 
}

來源

2016-02-12 07:16:53

感謝您的回答。這解決了我的問題的一部分。因爲我不僅想從HomeView切換到FeedsView，而且要在一組路由之間切換。就像我在說明中發佈的：我想啓用一組路由，其佈局取決於身份驗證狀態。隨着你的答案，我可以在佈局之間切換，但我仍然需要控制內部組件。匿名用戶無法訪問「/ profile」，「/ settings」或「/ search」路由。 –

您可以檢查ComponentWillMount中的身份驗證狀態，並在需要時重定向到登錄。 componentWillMount（）{ if（！hasToken）{ this.props.history.push（'/ login'）; } } –

如何使用reactjs，redux和redux-simple-router根據auth狀態共享根URL？

回答

相關問題