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エラーを傍受し、最初の呼び出しから返されたトークンを待つ方法を知らない。

私はオブザーバブルを使用しています。

Answer 1

現在のリフレッシュトークンをクラスの変数に設定し、他の呼び出しが401として戻ってくるので、nullでないかどうかを確認できます。 nullでない場合は、完了するのを待ってからもう一度やり直してください。

ここに書いた本当に基本的な擬似コードがあります。私はそれが機能することを100％確信していません。また、明示的にthis.get(url)を呼び出す代わりに、元のリクエストを再試行するためのrxjsの方法があると確信しています。

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