1

反応フラックス アーキテクチャには、401 エラーをログイン ページにリダイレクトできる Angular のインターセプターに似たものがありますか?

4

1 に答える 1

3

具体的にはありませんが、ajax リクエスト エラー コールバックで処理できます。401 応答を確認し、ログイン コンポーネント/リダイレクトをレンダリングしてログインします。facebook のフラックス実装では、通常、アクション内に 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);
  }
});

次に、react ルーター スコープがあるため、コンポーネントでリダイレクトを呼び出します。

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 に答える