Angular $ httpインターセプターは、認証が失敗したときに複数のモーダルを開きます

ニール

失敗した$http interceptorときにログインモーダルを表示するためにを使用してい$authます。これが私が持っている簡単なセットアップです:

$provide.factory('modalWhenLoggedOut', ['$q', '$injector', '$rootScope',
          function($q, $injector, $rootScope) {

        return {

             responseError: function(rejection) {

                 // $injector.get to fix circular dependency error
                 var loginModal = $injector.get('LoginModalService');
                 var $http = $injector.get('$http');
                 var $state = $injector.get('$state');

                 // Check for reasons instead of status code
                 var rejectionReasons = ['token_not_provided', 'token_expired', 'token_absent', 'token_invalid'];

                 // Loop through each rejection reason and redirect
                 angular.forEach(rejectionReasons, function(value, key) {

                     if(rejection.data.error === value) {
                        // Show the login modal
                         var deferred = $q.defer();

                         loginModal()
                           .then(function () {
                             deferred.resolve( $http(rejection.config) );
                         })
                         .catch(function () {
                             $state.go('index');
                             deferred.reject(rejection);
                        });

                        return deferred.promise;
                     }
                 });

                 return $q.reject(rejection);
             }
         }
}]);

// Push the new factory onto the $http interceptor array
$httpProvider.interceptors.push('modalWhenLoggedOut');

上記のコードは正常に機能します。しかし、私が抱えている問題は、APIが複数の認証失敗エラーをスローすると、インターセプターが同時に複数のモーダルを開くことです。通常、1ページでバックエンドAPIに接続するさまざまなサービスが2〜3回ある可能性があり、認証が失敗すると、これらのAPIはすべて、無効なトークンの間に認証失敗エラーを返します。このインターセプターは、3つのtaken_invalidエラーとしてそれを取得し、3つのログインモーダル1を互いに重ねて表示しています。どうすればこれを防ぐことができますか?

認証の失敗が何度発生しても、インターセプターが1つのログインモーダルのみを表示するようにするにはどうすればよいですか?

私のサービスは次のようになります。

.service('LoginModalService', ['$modal', '$rootScope', 
            function($modal, $rootScope) {

                    function updateRootScope() {
                            $rootScope.loginProgress = false;
                    }

                  if ($rootScope.loginProgress = false) {
                    return function() {
                      var instance = $modal.open({
                        templateUrl: rootPath + 'views/partials/LoginModalTemplate.html',
                        controller: 'LoginModalCtrl'
                      })

                    return instance.result.then(updateRootScope);
                  };
                  }
}])

このサービスでは$rootScope.loginProgress、ログインモーダルが開かれているかどうかを確認するためのスイッチとして使用しようとしています。ただし、モーダルがすでに開かれている場合$rootScope.loginProgress(trueの場合)、空のpromiseを返す方法がわかりません

ニール

この問題を解決するために、現在http-auth-interceptorインターセプターを使用しており$rootScope.loginProgress、ログインモーダルオープンステータスに基づいて変更しています。複数の401が原因で開かれる連続したモーダルは、このログインモーダルステータスをチェックしてから、モーダルを開くかどうかを決定します。を使用してhttp-auth-interceptor、を見てスイッチを追加することができ'event:auth-loginRequired'ます。これが私が使用しているコードです:

scope.$on('event:auth-loginRequired', function() {      
            if(!$rootScope.loginProgress) {
                        $rootScope.loginProgress = true;
                        LoginModalService()
                            .then(function () {
                              authService.loginConfirmed();
                                    $rootScope.loginProgress = false;
                          })
                          .catch(function () {
                              authService.loginCancelled();
                                    $rootScope.loginProgress = false;
                          });
            }
});

LoginModalService()ログインモーダルを開くサービスはどこにありますか。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Angularjsはモジュールthitch'angular-file-saver 'のインスタンス化に失敗しました

分類Dev

Angular-正式にはカスタムタイプのコントローラーが展開に失敗する

分類Dev

Jasmineを使用したAngularサービスのテスト:モジュールアプリのインスタンス化に失敗しました

分類Dev

Angular 2のモーダルポップアップで[再試行]ボタンをクリックして失敗したWebAPI呼び出しを再度行い、「再試行」で呼び出しが成功した場合は実行を続行します

分類Dev

Angular 2ルーティング:保護されたURLに直接アクセスすると、ルートガードの検証が失敗します

分類Dev

Angularのモジュールui-bootstrapのインスタンス化に失敗しました

分類Dev

Angular 5に複数のインターセプターを登録することは可能ですか?

分類Dev

Angular-cliはインストールされますが、新しいプロジェクトを開始しません:パッケージのインストールに失敗しました

分類Dev

Angular 5 HttpClient GET:ngOnInitのときにコンストラクターで失敗した場合は成功

分類Dev

Angularでは、インデックス付きタイプとしてインポートされたjsonファイルは常に未定義を返します

分類Dev

Angular 5 Typescriptは、プロパティデータがタイプResponseに存在しないため、webpackが失敗したと言います

分類Dev

コンポーネントhttpでAngular1.4の新しいルーターを使用すると、「コントローラーHeadlinesControllerをインスタンス化できませんでした」という警告がスローされます。

分類Dev

Angular 2 http Postがクライアント側で失敗しましたが、データがデータベースに挿入されています

分類Dev

@ angular / materialをインストールしようとすると、このエラーが発生しますデータパス ""に追加のプロパティ(スタイル)を含めることはできません

分類Dev

Angular:ユーザーがブートストラップモーダルダイアログの外側をクリックしたときにイベントをキャッチする方法は?

分類Dev

Angularは間違いなくロードできるモジュールのロードに失敗します

分類Dev

WebpackビルドAngular.js-モジュールアプリのインスタンス化に失敗しました

分類Dev

配列のインデックス値を使用してHTMLモーダルに渡すと、Angular7のループを使用せずにデータを表示できます。

分類Dev

なぜAngularは、プロバイダーのuseFactoryで関数にパラメーターを渡すことができないのですか?

分類Dev

Angular2 +アプリのすべてのコンポーネント/モジュールで「ルーターのプロバイダーがありません」というエラーが表示されるようになりました

分類Dev

別のコントローラーがAngularのUI-bootstrapでロードされたときに、モーダルインスタンスが呼び出されないようにするにはどうすればよいですか?

分類Dev

データのグループ化中にAngular2にカスタムパイプをインポートすることはできません

分類Dev

Angular Material 1.3.0を使用しているにもかかわらず、「ngGaterialモジュールのインスタンス化に失敗しました」というAngular Materialのインストール

分類Dev

Angularサンプルアプリを本番モードでデプロイするときに404エラーが発生しました

分類Dev

Rasperry PiでAngularアプリをビルドすると、マークが無効になります-ヒープ制限に近いコンパクトな割り当てに失敗しました-JavaScriptヒープのメモリが不足しています

分類Dev

Angular 2-認証トークンなどのグローバル変数を保存して、すべてのクラスがそれらにアクセスできるようにするための最良の方法は何ですか?

分類Dev

ラジオボタングループを使用してAngularモーダルウィンドウを開くと、ExpressionChangedAfterItHasBeenCheckedErrorが発生します

分類Dev

カスタム資格情報認証プロバイダーの認証が失敗したときにカスタムHTTP応答コードを返す

分類Dev

ボタンを押したときのAngular7フォームの検証またはhtmlにないプロパティ

Related 関連記事

  1. 1

    Angularjsはモジュールthitch'angular-file-saver 'のインスタンス化に失敗しました

  2. 2

    Angular-正式にはカスタムタイプのコントローラーが展開に失敗する

  3. 3

    Jasmineを使用したAngularサービスのテスト:モジュールアプリのインスタンス化に失敗しました

  4. 4

    Angular 2のモーダルポップアップで[再試行]ボタンをクリックして失敗したWebAPI呼び出しを再度行い、「再試行」で呼び出しが成功した場合は実行を続行します

  5. 5

    Angular 2ルーティング:保護されたURLに直接アクセスすると、ルートガードの検証が失敗します

  6. 6

    Angularのモジュールui-bootstrapのインスタンス化に失敗しました

  7. 7

    Angular 5に複数のインターセプターを登録することは可能ですか?

  8. 8

    Angular-cliはインストールされますが、新しいプロジェクトを開始しません:パッケージのインストールに失敗しました

  9. 9

    Angular 5 HttpClient GET:ngOnInitのときにコンストラクターで失敗した場合は成功

  10. 10

    Angularでは、インデックス付きタイプとしてインポートされたjsonファイルは常に未定義を返します

  11. 11

    Angular 5 Typescriptは、プロパティデータがタイプResponseに存在しないため、webpackが失敗したと言います

  12. 12

    コンポーネントhttpでAngular1.4の新しいルーターを使用すると、「コントローラーHeadlinesControllerをインスタンス化できませんでした」という警告がスローされます。

  13. 13

    Angular 2 http Postがクライアント側で失敗しましたが、データがデータベースに挿入されています

  14. 14

    @ angular / materialをインストールしようとすると、このエラーが発生しますデータパス ""に追加のプロパティ(スタイル)を含めることはできません

  15. 15

    Angular:ユーザーがブートストラップモーダルダイアログの外側をクリックしたときにイベントをキャッチする方法は?

  16. 16

    Angularは間違いなくロードできるモジュールのロードに失敗します

  17. 17

    WebpackビルドAngular.js-モジュールアプリのインスタンス化に失敗しました

  18. 18

    配列のインデックス値を使用してHTMLモーダルに渡すと、Angular7のループを使用せずにデータを表示できます。

  19. 19

    なぜAngularは、プロバイダーのuseFactoryで関数にパラメーターを渡すことができないのですか?

  20. 20

    Angular2 +アプリのすべてのコンポーネント/モジュールで「ルーターのプロバイダーがありません」というエラーが表示されるようになりました

  21. 21

    別のコントローラーがAngularのUI-bootstrapでロードされたときに、モーダルインスタンスが呼び出されないようにするにはどうすればよいですか?

  22. 22

    データのグループ化中にAngular2にカスタムパイプをインポートすることはできません

  23. 23

    Angular Material 1.3.0を使用しているにもかかわらず、「ngGaterialモジュールのインスタンス化に失敗しました」というAngular Materialのインストール

  24. 24

    Angularサンプルアプリを本番モードでデプロイするときに404エラーが発生しました

  25. 25

    Rasperry PiでAngularアプリをビルドすると、マークが無効になります-ヒープ制限に近いコンパクトな割り当てに失敗しました-JavaScriptヒープのメモリが不足しています

  26. 26

    Angular 2-認証トークンなどのグローバル変数を保存して、すべてのクラスがそれらにアクセスできるようにするための最良の方法は何ですか?

  27. 27

    ラジオボタングループを使用してAngularモーダルウィンドウを開くと、ExpressionChangedAfterItHasBeenCheckedErrorが発生します

  28. 28

    カスタム資格情報認証プロバイダーの認証が失敗したときにカスタムHTTP応答コードを返す

  29. 29

    ボタンを押したときのAngular7フォームの検証またはhtmlにないプロパティ

ホットタグ

アーカイブ