Javascript 使用中间件检查用户会话响应redux

我花了大约一周的时间阅读redux，然后才投入到任何相当大的工作中。在完成了我所做的大部分教程后，我意识到，好吧，我理解redux，但我该如何构建一个复杂的系统呢

我开始创建我的系统操作：

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（）

？

是的，您可以创建一个函数，该函数在您转到需要登录的路由时执行

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>

---

您可以对需要使用高阶组件对用户进行身份验证的路径实施身份验证过滤器

创建包装组件

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);
}

---

好朋友：）不过我觉得很奇怪，因为

CheckLogin

操作实际上是一行，对吗<代码>类型：登录\u检查例如，哪个右减速器点火？是的。您还可以通过页面刷新将登录令牌放入cookie/localstorage中进行持久化，并在CheckLogin（）操作中检查该令牌。

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