Angular 2에서는 승인되지 않은 http 호출을 가로 채고 자동으로 토큰을 새로 고치며 다른 http 호출에 새 토큰을 사용하게하는 방법은 무엇입니까?

Question

OAuth를 액세스/새로 고침 토큰과 함께 사용하고 있습니다.

Handling refresh tokens using rxjs

https://www.illucit.com/blog/2016/03/angular2-http-authentication-interceptor/

http://restlet.com/company/blog/2016/04/18/interacting-efficiently-with-a-restful-service-with-angular2-and-rxjs-part-3/

내가 확장하고있다 : 나는 전화를 다시 시도하려고 무단 HTTP 호출을 잡을 자동으로 토큰을 새로 고침하고 새 토큰을 사용하는 예제를 따랐다 Angular의 Http 클래스와 401을 성공적으로 포착했습니다. 내 문제는 내가 거의 동시에 여러 개의 HTTP 호출을하는 것입니다. 그들은 모두 무단으로 돌아갑니다. 401 그런 다음 그들은 모두 토큰을 새로 고칩니다. 서버에 처음 도달하면 새 토큰을 성공적으로 가져오고 새 토큰으로 http 호출을 다시 시도합니다. 그러나 다른 모든 호출은 첫 번째 호출이 새 토큰을 반환 할 때까지 기다리지 않고 동일한 새로 고침 토큰을 사용하여 동일하게 수행하려고 시도합니다. 이로 인해 백엔드에서 오류가 발생합니다.

이상적으로 401을 반환하는 첫 번째 http 호출은 새 토큰을 가져 오는 과정을 거치며 차단 된 다른 모든 호출은 첫 번째 호출이 완료 될 때까지 대기합니다. 그러나 게시 한 예제를 기반으로, 나는 "일시 중지"하는 방법을 몰라서 후자가 401 오류를 가로 채고 첫 번째 호출에서 반환 된 토큰을 기다립니다.

나는 observables를 사용하고 있습니다.

Answer 1

아마도 현재 새로 고침 토큰을 관찰 할 수있는 변수를 클래스의 변수로 설정하고 다른 호출이 401으로 돌아올 때 null이 아닌지 확인하십시오. null가 아닌 경우, 완료 할 때까지 기다렸다가 다시 시도하십시오.

여기에 내가 작성한 정말 기본적인 의사 코드가 있습니다. 100 % 확신 할 수는 없습니다. 또한 명시 적으로 호출하지 않고 원래 요청을 다시 시도 할 수있는 더 많은 방법이 있다고 확신합니다.

private refreshObservable: Observable<T>; 

public get<T>(url: string) : Observable<T> { 
    return this.http.get(url) 
     .catch(err => { 
      //assuming err is a 401.. 
      return (this.refreshObservable || this.refreshTokens()).flatMap(() => this.get(url)); 
     }) 
} 

private refreshTokens() { 
    return this.refreshObservable = this.http.get('refreshendpoint').do(() => this.refreshObservable = null).share(); 
}