javascript - React 通量拦截器实现

Question

React Flux 架构是否有类似于 Angular 的拦截器的功能，可以将 401 错误重定向到登录页面？

Answer 1

没有具体说明，但您可以在 ajax 请求错误回调中处理它。检查 401 响应，呈现您的登录组件/重定向到登录。通过 facebook 的 flux 实现，我通常将我的 ajax 调用保留在操作中。成功回调调用调度程序。我使用 react-router，所以我可以简单地去登录:

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';在 Action 中。

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

编辑处理所有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 向下传递给函数。用它来调用诸如 transitionTo 之类的东西，但我觉得这很不干净。