web-dev-qa-db-ja.com

401 AngularJSでの不正なエラー処理

私はAngularJSの初心者で、401ステータスを処理する方法を見つけるために3日間を費やしています。 $ httpを使用して、$ resourceを使用してインターセプターを試してみましたが、何も機能しません。私のアプリは同じサーバーでJSONP呼び出しを呼び出します。エラーが発生すると、エラーコールバック関数でキャッチされます。ただし、ステータスは常に0であり、応答は未定義です。

まず、このインターセプターを試してみました

app.config(['$httpProvider', function($httpProvider) {
$httpProvider.responseInterceptors.Push(['$q', function($q) {
    return function(promise) {
        return promise.then(function(response) {
            console.log('success in interceptor');
            return response; 
        }, function(response) {
            console.log('error in interceptor');
            console.log(response);
            if (response.status === 401) {
                response.data = { 
                    status: false, 
                    description: 'Authentication required!'
                };
                return response;
            }
            return $q.reject(response);
        });
    }
}]);
}]);

第二に、$ resourceを使用してコントローラーでも試してみました

  $scope.fetchData = function(fromDate, toDate){
        Cancel.get({from: fromDate, to: toDate, perPage: 99999},
                    function(data){                            
                      $scope.cancels  = $scope.filteredCancels = data.data;
                      $scope.search();
                    },
                    function(response) {
                      $scope.errorMessage = '<h4>Error : '+response.status+'</h4>';
                      window.location = "/";
                    });              
      };

3番目に、$ resourceの代わりに$ httpを使用してみました

  $scope.fetchData = function(fromDate, toDate){
     $http.jsonp('http://Host:8900/api/cancellations?callback=JSON_CALLBACK')
         .success(function(data, status, headers, config) {
             console.log(status);
          })
         .error(function(data, status, headers, config) {
             console.log(status);              
          };

JSONP呼び出しのヘッダー情報は次のとおりです

Request URL:http://Host:8900/api/cancellations?callback=angular.callbacks._0
Request Method:GET
Status Code:401 Unauthorized
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Cache-Control:max-age=0
Connection:keep-alive
Cookie:__utma=149207145.339724205.1374885003.1377550245.1378313049.3; __utmc=149207145; __utmz=149207145.1378313049.3.2.utmcsr=cyphersmart.qc3deva.electricmail.com:8900|utmccn=(referral)|utmcmd=referral|utmcct=/; remember_username=elie.kim%40electricmail.com; PHPSESSID=gdoemlp5jltqq62etc5gfuh653; cookie=cookiecheck; __utma=1.789184132.1378340585.1378499390.1378504453.10; __utmb=1.3.10.1378504453; __utmc=1; __utmz=1.1378340585.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Host:host:8900
Referer:http://Host:8900/reports/cancels/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Ubuntu Chromium/25.0.1364.160 Chrome/25.0.1364.160 Safari/537.22
Query String Parametersview sourceview URL encoded
callback:angular.callbacks._0
Response Headersview source
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:keep-alive
Content-Type:application/json; charset=utf-8
Date:Fri, 06 Sep 2013 22:02:13 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive:timeout=20
Pragma:no-cache
Server:nginx/0.7.65
Transfer-Encoding:chunked

無許可のステータス401を処理する方法を見つけることができませんでしたが、すべてを縛りました。ヒントや親切なアドバイスをいただければ幸いです。

angularjscallbackjsonpinterceptorunauthorized
17
Elie Kim

受け入れられた回答は、angularの新しいバージョンでは機能しません。 1.5.xを使用して（そしておそらくそれ以前にも）、インターセプターを別の方法で作成する必要があります。

// http interceptor to handle redirection to login on 401 response from API
app.factory('httpResponseInterceptor', ['$q', '$rootScope', '$location', function($q, $rootScope, $location) {
    return {
        responseError: function(rejection) {
            if (rejection.status === 401) {
                // Something like below:
                $location.path('signin/invalidSession');
            }
            return $q.reject(rejection);
        }
    };
}]);

申し込み：

app.config(function($httpProvider) {
    $httpProvider.interceptors.Push('httpResponseInterceptor');
});

詳細については、こちらを参照してください https://docs.angularjs.org/api/ng/service/ $ http＃interceptors

9
Joel Duckworth

私は最近非常によく似たことをする必要がありました、これが私のインターセプターです

app.factory("HttpErrorInterceptorModule", ["$q", "$rootScope", "$location",
    function($q, $rootScope, $location) {
        var success = function(response) {
            // pass through
            return response;
        },
            error = function(response) {
                if(response.status === 401) {
                    // dostuff
                }

                return $q.reject(response);
            };

        return function(httpPromise) {
            return httpPromise.then(success, error);
        };
    }
]).config(["$httpProvider",
    function($httpProvider) {
        $httpProvider.responseInterceptors.Push("HttpErrorInterceptorModule");
    }
]);

ユースケースに合わせてわずかに変更

4
DrogoNevets

API呼び出しが401を返す場合、ユーザーをログインページにリダイレクトする必要があります。 AngularのHTTPインターセプターはその仕事に最適です。上記のapp.jsからわかるように、ここでパイプにプッシュされています。

httpProvider.responseInterceptors.Push('httpInterceptor');

インターセプターの実装自体、

'use strict';

angular.module('dashboardApp').factory('httpInterceptor', function httpInterceptor ($q, $window, $location) {
  return function (promise) {
      var success = function (response) {
          return response;
      };

      var error = function (response) {
          if (response.status === 401) {
              $location.url('/login');
          }

          return $q.reject(response);
      };

      return promise.then(success, error);
  };
});
3
Pedro Paulo Nery

同様のソリューションに従います...

angular.module('myApp', ['myApp.services', 'myApp.directives'], function ($routeProvider, $locationProvider, $httpProvider, $location) {

    var httpInterceptor = ['$rootScope', '$q', function (scope, $q) {

        function success(response) {
            return response;
        }

        function error(response) {
            var status = response.status;

            if (status == 401) {
                $location.url('/login');
                return;
            }

            return $q.reject(response);

        }

        return function (promise) {
            return promise.then(success, error);
        }

    }];
    $httpProvider.responseInterceptors.Push(httpInterceptor);
});
2
Nery Jr