Login verification with React, redux and react-redux-router : the proper way?

Question

I have a little question about react, redux and react-redux-router.

This is pretty simple but I can't figure out what is the best way to handle this so let's go.

I'm working on a simple app with a loggin screen and some pages with restrected access to auth users.

Here is my 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>

I want to redirect all no-logged users to the logging page (/login) if they try to reach any pages in <Route component={Administration}> .

So what is the best way to achieve that ? I can use componentWillMount on every sub-components but I'm sure that's not a good idea :). I've also tried to find a hook on my Administration component but nothing interested.

Any advices ?

Sub question : I use dispatch(routeActions.push()) to navigate between pages. this works fine. But if the landing page (first load) is something else than '/', a 404 is throwed. I have to go to '/' first.

Answer 1

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