2013-09-06 15 views
14

में अनधिकृत त्रुटि हैंडलिंग मैं अंगुलरजेएस में बहुत नौसिखिया हूं, और अब 401 स्थिति को संभालने के लिए एक रास्ता खोजने में 3 दिन खर्च कर रहा हूं। मैंने $ संसाधन का उपयोग करके $ http का उपयोग करके इंटरसेप्टर की कोशिश की है ... लेकिन कुछ भी काम नहीं कर रहा है। मेरा ऐप एक ही सर्वर पर JSONP कॉल को कॉल करता है। जब त्रुटि होती है तो यह त्रुटि कॉलबैक फ़ंक्शन में पकड़ा जाता है। लेकिन स्थिति हमेशा 0 होती है और प्रतिक्रिया अपरिभाषित होती है।401 एंगुलरजेएस

पहले, मैं इस इंटरसेप्टर

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); 
     }); 
    } 
}]); 
}]); 

दूसरा, यह भी $ संसाधन

$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 = "/"; 
        });    
     }; 

तीसरा, $ संसाधन के बजाय $ 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 को संभालने का कोई तरीका नहीं मिला, हालांकि मैंने सभी चीजों को बांध लिया। अगर मुझे टिप या दयालु सलाह मिल सकती है तो इसकी बहुत सराहना की जाएगी।

+0

अगर आप ब्राउज़र में अपने यूआरएल पर नेविगेट करें, क्या होता है? – akonsu

+0

आप कोणीय का किस संस्करण का उपयोग कर रहे हैं? यह महत्वपूर्ण है क्योंकि 'प्रतिक्रिया इंटरसेप्टर' 1.2 – TheSharpieOne

+0

@TheSharpieOne में बदल गया है मेरा संस्करण v1.0.6 है। क्या यह कारण है? –

उत्तर

4

मैं हाल ही में बहुत समान करने के लिए की जरूरत है, यहाँ मेरी इंटरसेप्टर

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"); 
    } 
]); 

आपके उपयोग के मामले के लिए थोड़ा संशोधित

2

एक ऐसी ही समाधान का पालन करता है ...

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); 
}); 
+0

$ httpProvider.interceptors.push ("HttpErrorInterceptorModule"); – Krack

2

के मामले में है कोई एपीआई कॉल 401 देता है हमें उपयोगकर्ता को लॉगिन पेज पर रीडायरेक्ट करना होगा। कोणीय का 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); 
    }; 
}); 
+0

स्थान.path (/ login) पर रीडायरेक्ट करते समय आप उपयोगकर्ता को कैसे दिखाते हैं, कारण यह लॉग आउट क्यों किया गया था? – maumercado

4

स्वीकार किए जाते हैं जवाब कोणीय के बाद के संस्करणों के लिए काम नहीं करता। 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 # इंटरसेप्टर