反应通量拦截器实现

Posted 2023-02-22

【中文标题】反应通量拦截器实现

【英文标题】：React flux interceptor implementation

【发布时间】：2015-09-23 14:32:12

【问题描述】：

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

【问题讨论】：

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

【参考方案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 调用使用包装器正在破坏模块化。一定有更好的解决方案。