反应通量拦截器实现答案

【问题标题】：React flux interceptor implementation反应通量拦截器实现
【发布时间】：2023-03-22 10:44:02
【问题描述】：

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

【问题讨论】：

Flux 模式并没有真正处理 ajax 请求处理，甚至 HTTP。这是一种在应用程序中处理数据流的模式。不过，我见过的大多数 Flux 应用程序/库都处理异步数据请求“动作创建者”。但它不在 Flux 关心的范围内，如何实际获取数据或处理 HTTP。

标签： javascript reactjs reactjs-flux fluxible

【解决方案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);
  }
});

然后在组件中调用重定向，因为它具有反应路由器范围：

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 传递给函数。用它来调用像transitionTo 这样的东西，但这对我来说感觉不干净。

【讨论】：

是的，但问题是我有 100 个操作会发布到后端 API 服务器，因此我必须按站点而不是按操作执行此操作。
在我看来，对知道“/login”的 ajax 调用使用包装器正在破坏模块化。一定有更好的解决方案。