Làm thế nào để xử lý nhiều phản ứng trong góc responseError chặn

Question

Tôi hiện đang sử dụng đoạn mã sau để rethrow một yêu cầu mà trả về một 401 từ API của tôi:

responseError: function(rejection) { 
       var authData = localStorageService.get('authorizationData'); 
       if (rejection.status === 401 && authData) { 
        var authService = $injector.get('authService'); 
        var $http = $injector.get('$http'); 
        ̶v̶a̶r̶ ̶d̶e̶f̶e̶r̶r̶e̶d̶ ̶=̶ ̶$̶q̶.̶d̶e̶f̶e̶r̶(̶)̶;̶ 

        var promise = authService.refreshToken(); 

        return ̶d̶e̶f̶e̶r̶r̶e̶d̶.̶ promise.then(function() { 
         return $http(rejection.config); 
        }); 
       } 
       return $q.reject(rejection); 
      } 

này hoạt động tuyệt vời cho 1 yêu cầu, nhưng nó doesn' t dường như làm việc nếu tôi nhận được hai 401 trở lại từ một trang duy nhất, chẳng hạn như khi trang đang tải với hai cuộc gọi api để cư trú các phần khác nhau. Làm thế nào tôi có thể nhận được đánh chặn của tôi để rethrow nhiều cuộc gọi hoãn lại?

Ngoài ra, không nên đánh lửa cho mỗi 401 riêng lẻ? Không lý tưởng, nó sẽ gây ra nhiều cuộc gọi làm mới trên một trang duy nhất, nhưng cải thiện từ dữ liệu bị thiếu do cuộc gọi không bị thu hồi.

Ảnh chụp màn hình:

Answer 1

Một cách tiếp cận là để tiết kiệm lời hứa token và chuỗi các lần thử lại lần thứ hai và tiếp theo cho đến khi làm mới thẻ hoàn tất:

responseError: function(rejection) { 
    var authService = $injector.get('authService'); 
    var $http = $injector.get('$http'); 
    var tokenPromise = null; 

    var authData = localStorageService.get('authorizationData'); 
    if (rejection.status === 401 && authData) { 

     if (!tokenPromise) { 
      tokenPromise = authService.refreshToken() 
       .finally(function() { 
       tokenPromise = null; 
      }); 
     }; 

     return tokenPromise.then(function() { 
      return $http(rejection.config); 
     }); 
    } else { 
     throw rejection; 
    } 
} 

Trong ví dụ trên từ chối xử lý tạo ra một lời hứa làm mới mã thông báo và sau đó vô hiệu hóa nó khi các thanh toán làm mới mã thông báo (hoặc hoàn thành hoặc bị từ chối). Nếu một từ chối khác xảy ra trong khi làm mới mã thông báo đang được tiến hành, hãy thử lại trong chuỗi (và bị trì hoãn) cho đến khi XHR làm mới mã thông báo hoàn tất.

Answer 2

khá giống georgeawg câu trả lời ...

responseError: function(rejection) { 
       var authData = localStorageService.get('authorizationData'); 
       if (rejection.status === 401 && authData && !isAuthRequest() /* If request for refresh token fails itself do not go into loop, i.e. check by url */) { 
        var authService = $injector.get('authService'); 
        var $http = $injector.get('$http'); 

        var promise = authService.refreshTokenExt(); // look below 

        return ̶promise.then(function() { 
         return $http(rejection.config); 
        }); 
       } 
       return $q.reject(rejection); 
      } 

AuthService:

... 
var refreshAuthPromise; 

service.refreshTokenExt = function() { 
    if (refreshAuthPromise == null) { 
    refreshAuthPromise = authService.refreshToken().catch(function() { 
     // Cant refresh - redirect to login, show error or whatever 
    }).finally(function() { 
     refreshAuthPromise = null; 
    }); 
    } 
    return refreshAuthPromise; 
}