1

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

4

1 回答 1

3

不具体，但您可以在您的 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但对我来说感觉不干净的东西。

于 2015-07-06T12:51:38.077 回答