Question

我正在构建一个基于reactjs，redux和react-router（redux-simple-router）的网站，而且我有点陷入困境，想知道如果用户是否经过身份验证，如何共享根路径

我正在看这个例子https://github.com/reactjs/react-router/tree/master/examples/auth-with-shared-root，但老实说我无法理解它。

我有两种不同的布局。第一个是公共布局，并在用户未经过身份验证时显示。从这里您可以访问登录页面和注册。

用户通过身份验证后，我想向他展示内部应用程序，这是一个完全不同的布局，但是在相同的根URL中进行。

未对用户进行身份验证时：

<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：我有一个Token类，我在其中存储了身份验证状态（JWT），方法是hasToken。

在我使用JSX语法的示例中，我不知道是否必须切换到config语法才能获得所需的结果。

感谢任何帮助。

Answer 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.
                ]
            }
        ]
    }
    ]
}

我希望这会有所帮助。

Answer 2

如果用户未登录，您可以创建一个显示HomeView的新组件，如果用户已通过身份验证，则可以创建FeedsView。

所以你有：

<IndexRoute component={RootComponent} />

RootComponent应该执行以下操作：

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

如何使用reactjs，redux和redux-simple-router根据auth状态共享根URL？

2 个答案: