Question

我有一个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.

哪种做法更好？

Answer 1

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

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中，让容器处理身份验证和获取数据是一种好习惯吗？

1 个答案: