再リクエストの角度2

Question

角度2のアプリでは、APIへのリクエストごとにトークンのヘッダーがあります。期限切れのトークンのAPIの場合は、401 httpコードで応答します。私はトークンを更新する方法を持っていますが、新しいトークンが取得されている間に前のリクエストを再送する方法はありますか？

Answer 1

あなたは観測のcatchオペレータ使用してエラーをキャッチし、このためにこの方法をHttpクラスを拡張できます。

アプローチは、エラーを傍受するためにHTTPオブジェクトを拡張することができます

@Injectable() 
export class CustomHttp extends Http { 
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { 
    super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('request...'); 
    return super.request(url, options).catch(res => { 
     // do something 
    });   
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    console.log('get...'); 
    return super.get(url, options).catch(res => { 
     // do something 
    }); 
    } 
} 

をし、以下に説明するように登録：

bootstrap(AppComponent, [HTTP_PROVIDERS, 
    new Provider(Http, { 
     useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions), 
     deps: [XHRBackend, RequestOptions] 
    }) 
]); 

catchオペレータで定義されたコールバック内、よあなたのメソッドを呼び出して、トークンを更新し、結果を取得し、ソース要求で新しいトークンを設定し、再度実行することができます。これは完全に透過的です。

get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    return super.get(url, options).catch(res => { 
     if (res.status === 401) { 
     return this.getToken().flatMap(token => { 
      var sourceOptions = options || {}; 
      var headers = sourceOptions.headers || new Headers(); 
      headers.append('Authorization', token); // for example 
      return super.get(url, options); 
     }); 
     } 

     return Observable.throw(res); 
    }); 
    } 

編集

あなたはdoとshare演算子を使用してgetTokenメソッド内で、いくつかのキャッシュを実装する必要がある他の要求 "一時停止" するには：

getToken() { 
    if (hasTokenExpired()) { 
    this.token = null; 
    this.tokenObservable = null; 
    } 

    if (this.token) { 
    // Gotten the new token 
    return Observable.of(this.token); 
    } else if (this.tokenObservable) { 
    // Request in progress... 
    return this.tokenObservable; 
    } else { 
    // Execute the "refresh token" request 
    return this.get('/refreshToken') 
     .map(res => res.json) 
     .do(token => { 
     this.token = token; 
     this.tokenObservable = null; 
     }) 
     .share(); 
    } 
} 

をここで

はサンプルです