Question

反应通道架构是否与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);
  }
});

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

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这样的东西，但这对我来说是不洁净的。

React flux拦截器实现

1 个答案: