2013-09-06 73 views
14

Tôi là người mới trong AngularJS, và bây giờ dành 3 ngày để tìm cách xử lý trạng thái 401. Tôi đã cố gắng đánh chặn, bằng cách sử dụng $ http, sử dụng $ tài nguyên ... nhưng không có gì là làm việc. Ứng dụng của tôi gọi hàm JSONP trên cùng một máy chủ. khi lỗi xảy ra, nó bị bắt gặp trong hàm gọi lại lỗi. nhưng trạng thái luôn là 0 và phản hồi không xác định.401 xử lý lỗi trái phép trong AngularJS

Trước tiên, tôi đã cố gắng đánh chặn này

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

Thứ hai, cũng đã cố gắng trong bộ điều khiển sử dụng $ nguồn

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

Thứ ba, cố gắng sử dụng $ http thay vì $ nguồn

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

Dưới đây là thông tin tiêu đề cho cuộc gọi 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 

Tôi không thể tìm cách xử lý trạng thái trái phép 401, tôi đã ràng buộc tất cả mọi thứ. Nó sẽ rất được đánh giá cao nếu tôi có thể nhận được lời khuyên hay lời khuyên.

+0

nếu bạn điều hướng đến URL của bạn trong trình duyệt, điều gì sẽ xảy ra? – akonsu

+0

Bạn đang sử dụng phiên bản góc nào? Điều này rất quan trọng vì 'responseInterceptors' đã thay đổi trong 1,2 – TheSharpieOne

+0

@TheSharpieOne phiên bản của tôi là v1.0.6. đó có phải là lý do? –

Trả lời

4

tôi cần phải làm rất giống nhau thời gian gần đây, ở đây là đánh chặn của tôi

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

sửa đổi nhẹ đối với trường hợp sử dụng của bạn

2

Làm theo một giải pháp tương tự ...

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

Trong trường hợp bất kỳ cuộc gọi API nào trả về 401, chúng tôi phải chuyển hướng người dùng đến trang đăng nhập. Interceptor HTTP của Angular rất tuyệt vời cho công việc đó. Như bạn có thể nhìn thấy từ app.js trên, nó được đẩy lên ống ở đây:

httpProvider.responseInterceptors.push('httpInterceptor'); 

Việc thực hiện đánh chặn chính nó,

'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

làm thế nào để bạn hiển thị cho người dùng khi chuyển hướng đến location.path (/ login) lý do tại sao anh ta bị đăng xuất? – maumercado

4

Câu trả lời được chấp nhận không làm việc cho các phiên bản sau của góc. Sử dụng 1.5.x (và thậm chí có thể sớm hơn), bạn cần phải viết các đánh chặn khác nhau:

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

Áp dụng với:

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

Xem ở đây để biết thêm thông tin https://docs.angularjs.org/api/ng/service/ $ http # chặn