Javascript 在React中，让容器同时处理身份验证和获取数据是否是一种好的做法？

我有一个React应用程序，它带有一个容器，可以处理身份验证和获取数据。如果有效的oauth访问令牌为false，则容器将重定向到登录页面。如果有效的oauth访问令牌为true，则容器继续获取数据以传递给子元素。现在，让容器同时处理这两件事是一种好的做法吗

--------------------     ---------------------- 
|                  |     |                    |   
| Container        |-----| Child              | 
|                  |     |                    | 
--------------------     ----------------------   
Check auth.               Gets data from 
Redirect if necessary.    Container via props.
Make endpoint call.       Render data.                        
Pass data obj to                  
Child A.                  

另一种方法是使用另一个容器来处理身份验证。如果经过身份验证，则呈现处理数据提取的嵌套容器：

--------------------     ----------------------     -------------------
|                  |     |                    |     |                 |
| Container A      |-----| Container B        |-----| Child A         |
|                  |     |                    |     |                 |
--------------------     ----------------------     -------------------

Check auth.               Make endpoint call.        Gets data from
Redirect if necessary.    Pass data obj to           Container via props.        
                          Child A via props.         Render data.

---

哪种做法更好？

在我看来，处理身份验证的最佳做法不是在组件级别，而是使用路由器。看看这个例子：

import React from 'react';
import {Router, Route, browserHistory, IndexRoute} from 'react-router';

import {readFromStorage} from './../utils/storage/index';

import Login from './../components/Login';
import Main from './../components/Main';
// If user doesn't have tokens, send them to Login page
function verifyAuth() {
    const user = readFromStorage('token');
    if (!user) {
        browserHistory.push('/');
    }
}
// If user logged in before and has tokens skip login page
function checkTokens() {
    const user = readFromStorage('token');
    if (user) {
        browserHistory.push('/main');
    }
}

export default (
    <Router history={browserHistory}>
    <Route path="/">
        <IndexRoute component={Login} onEnter={checkTokens}/>
        <Route path="main" component={Main} onEnter={verifyAuth}/>
    </Route>
    </Router>
);

从“React”导入React；
从“react Router”导入{Router，Route，browserHistory，IndexRoute}；
从“/../utils/storage/index”导入{readFromStorage}；
从“/../components/Login”导入登录名；
从“/../components/Main”导入Main；
//若用户并没有令牌，将其发送到登录页面
函数verifyAuth（）{
const user=readFromStorage（'token'）；
如果（！用户）{
browserHistory.push（'/'）；
}
}
//如果用户以前登录并拥有令牌，则跳过登录页面
函数checkTokens（）{
const user=readFromStorage（'token'）；
如果（用户）{
browserHistory.push（'/main'）；
}
}
导出默认值(
);