javascript - 使用React、redux和react-redux-router进行登录验证: the proper way?

Question

我有一个关于react、redux和react-redux-router的小问题。

这非常简单，但我不知道处理这个问题的最佳方法是什么，所以让我们开始吧。

我正在开发一个简单的应用程序，带有登录屏幕和一些限制身份验证用户访问的页面。

这是我的路由器:

   <Provider store={store}>
      <Router history={browserHistory}>
         <Route path={Config.baseUrl} component={App}>
            <Route path="login" component={Login} />
            <Route component={Administration}>
               <IndexRoute component={Statistics} />
               <Route path="page2" component={p2} />
            </Route>
         </Route>
      </Router>
   </Provider>

如果所有未登录的用户尝试访问<Route component={Administration}>中的任何页面，我想将他们重定向到日志页面(/login)。 .

那么实现这一目标的最佳方法是什么？我可以使用componentWillMount在每个子组件上，但我确信这不是一个好主意:)。我还尝试在我的Administration上找到一个钩子(Hook)。组件但没什么兴趣。

有什么建议吗？

子问题:我使用dispatch(routeActions.push())在页面之间导航。这很好用。但如果登陆页面(首次加载)不是“/”，则会抛出 404 错误。我必须首先转到“/”。

Answer 1

我只会使用 https://github.com/reactjs/react-router-redux并创建抽象组件 AuthorizedViewComponent，它将检查用户状态并将所有未登录的用户重定向到/login。