使用中间件检查用户会话React Redux

Question

我花了大约1个星期的时间在redux上阅读，然后才陷入较大的内容。完成我完成的大多数教程后，我意识到了，好的，我了解redux，但是我该如何制造一个复杂的系统：p

我开始通过创建我的系统操作来进行：

function requestLogin(creds) {
    return {
        type: LOGIN_REQUEST,
        isFetching: true,
        isAuthenticated: false,
        creds
    }
}
function receiveLogin(user) {
    return {
        type: LOGIN_SUCCESS,
        isFetching: false,
        isAuthenticated: true,
        id_token: user.id_token
    }
}
function loginError(message) {
    return {
        type: LOGIN_FAILURE,
        isFetching: false,
        isAuthenticated: false,
        message
    }
}

但是，我如何使用使用的每个路由器（使用react-router）检查用户在存储在redux状态下登录状态后是否有会话？

我想创建每个视图执行的内容。只需在每个视图中写入exec()的函数？

Answer 1

是的，您创建一个函数，每当您进入需要登录的路由时执行。

import LoginActions from '../loginActions';
const requireLogin = (nextState, replace) => {
  store.dispatch(LoginActions.CheckLogin());
  const {login} = store.getState();
  if (!login.isAuthenticated)
    replace('/login');
};

在您的路由器中称呼它：

<Router component={Root}>
 <Route path="/dashboard" onEnter={requireLogin} component={dashboard}/>
</Router>

Answer 2

您可以为需要使用高阶组件对用户进行身份验证的路径实现Auth Filter。

创建包装组件

import React from 'react';
import { connect } from 'react-redux';
export default function(ComposedComponent) {
    class AuthFilter extends React.Component {
        // triggered when component is about to added
        componentWillMount() {
            if (!this.props.userAuthenticated) {
                console.log("navigate to login");
                this.context.router.push('/login');
            }
        }
        // before component updated
        componentWillUpdate(nextProps) {
            if (!nextProps.userAuthenticated) {
                console.log("navigate to login");
                this.context.router.push('/login');
            }
        }
        render() {
            return <ComposedComponent {...this.props} />
        }
    }
    AuthFilter.contextTypes = {
        router: React.PropTypes.func.isRequired
    }
    function mapStateToProps(state) {
        return { userAuthenticated: state.authenticated };
    }
    return connect(mapStateToProps)(AuthFilter);
}

，然后将包装添加到路由组件中：

Route path="/asset" component={AuthFilter(AssetRoute)}/>