关于javascript：反应通量拦截器实现


React flux interceptor implementation

反应通量体系结构是否类似于Angular的拦截器，您可以在其中将401错误重定向到登录页面？

相关讨论

没有特别说明，但是您可以在ajax请求错误回调中处理它。检查401响应，呈现您的登录组件/重定向以登录。使用facebook的flux实现，我通常将我的ajax调用保留在动作中。成功回调调用调度程序。我使用react-router，所以我可以直接登录：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
      });
    });
  }
};

在商店中，我会处理未经授权的回复：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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);
  }
});

然后在组件中调用重定向，因为它具有反应器作用域：

1
2
3
4
5
6
7
class MyComponent extends Component {
  _onChange() {
    if (ProjectStore.getUnauthorized()) {
      this.transitionTo('/login');
    }
  }
}

尽管如果要执行典型的页面重定向，则可以调用window.location.href = \\'/ login \\';。在动作内部。

通过将登录状态放到单独的存储中，可以更好地对其进行抽象。这是我在应用程序中所做的。我只是想保持简单，减少课程数量

相关讨论