Javascript React-flux拦截器的实现

react-flux架构是否有类似于Angular的拦截器的东西，您可以将401个错误重定向到登录页面

不具体，但您可以在ajax请求错误回调中处理它。检查401响应，呈现登录组件/重定向到登录。通过facebook的flux实现，我通常将ajax调用保存在操作中。成功回调调用调度程序。我使用react路由器，因此我只需进入登录：

var MyActions = {
  doSomething: function () {
    $.post('/projects/new', {

    }).done(function (res) {
      AppDispatcher.handleViewAction({
        actionType: ProjectConstants.PROJECT_CREATE,
        data: res
      });
    }).fail(function (res) {
      AppDispatcher.handleViewAction({
        actionType: ProjectConstants.UNAUTHORIZED
      });
    });
  }
};

在商店里，我处理未经授权的响应：

var _unAuth = false;

var MyStore = {
  getUnauthorized() {
    return _unAuth;
  },
  setUnauthorized(val) {
    _unAuth = val;
  }
}

AppDispatcher.register(function(payload) {
  var action = payload.action;
  if (action.actionType === ProjectConstants.UNAUTHORIZED) {
    ProjectStore.setUnauthorized(true);
  }
});

然后在组件中调用重定向，因为它具有react路由器作用域：

class MyComponent extends Component {
  _onChange() {
    if (ProjectStore.getUnauthorized()) {
      this.transitionTo('/login');
    }
  }
}

不过，如果要执行典型的页面重定向，可以调用window.location.href='/login'；在行动中

通过将登录状态放在单独的存储中，可以更好地对其进行抽象。这就是我在我的应用程序中所做的。我只是想保持简单，减少类和单件的数量

编辑以处理所有ajax请求：

我只需在ajax库周围编写一个包装器：

var ajax = {
  send: function (url, data, success, fail) {
    $.post(url, data).done(success).fail((jqXHR, textStatus, errorThrown) => {
      if (jqXHR.status === 401) {
        location.href = '/login';
      }
      else {
        fail(jqXHR, textStatus, errorThrown);
      }
    });
  }
}

调用它，而不是直接调用ajax库

---

我没有尝试过，但您可以通过操作调用将组件

this

向下传递给函数。使用它来调用类似于

转换到
的东西，但这让我觉得不干净。
是的，但问题是我有100个操作发布到后端API服务器，所以我必须以站点为中心，而不是以每个操作为基础。在我看来，在ajax调用周围使用一个知道“/login”的包装器打破了模块化。肯定有更好的解决方案，Flux模式实际上不处理ajax请求处理，甚至不处理HTTP。这是一种处理应用程序内数据流的模式。不过，我见过的大多数Flux应用程序/库都是处理异步数据请求的“动作创建者”。但是Flux并不关心如何实际获取数据或处理HTTP。