角度：リフレッシュトークンは一度だけ

Question

リフレッシュトークン戦略を使用して認証としてJWTを使用しており、トークンをヘッダーとして送信するAngularクライアントにインターセプタがあります。

送信する前に有効期限を確認し、必要に応じてrefreshTokenでトークンを更新します。

問題は2つ（またはそれ以上）の要求を送信し、両方ともトークンを更新しようとするときです。リフレッシュトークンのためにreqを送信する関数が必要です。同時に複数回呼び出された場合は、リフレッシュのために1つのhttp reqをサーバーに作成し、それを呼び出したすべての新しい更新トークンを返します。

これは私のインターセプタである：私は必要

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    const authService = this.inj.get(AuthService); 
    const token = authService.getToken(); 

    // if no token or this is a refresh token req 
    if (!token || req.url.split('/').pop() === 'refreshToken') { 
     return next.handle(req); 
    } 

    const decoded = jwt.decode(token); 

    // if token expired 
    if (decoded.exp < (Date.now()/1000)) { 
     return authService.refreshJWTToken().concatMap((newToken) => { 
     const clonedReq = req.clone({ 
      headers: req.headers.set('Authorization', 'JWT ' + newToken) 
     }); 
     return next.handle(clonedReq); 
     }); 
    } 

    const clonedReq = req.clone({ headers: req.headers.append('Authorization', 'JWT ' + token) }); 
    return next.handle(clonedReq); 
    } 

機能がauthService.refreshJWTToken（）です。

Observablesの演算子と関係があることはわかっていますが、これは少し新しくなっています。

Answer 1

さてさて、私はこれを読んだ後にそれを得た：助けをヴァディム（vagin）Siominへ

handleRefreshToken(req: HttpRequest<any>, next: HttpHandler): Observable<any> { 
    const authService = this.inj.get(AuthService); 

    if (!this.isRefreshingToken) { 
    this.isRefreshingToken = true; 

    // Reset here so that the following requests wait until the token 
    // comes back from the refreshToken call. 
    authService.tokenSubject.next(null); 

    return authService.doRefreshToken() 
     .switchMap((newToken: string) => { 
     authService.tokenSubject.next(newToken); 
     return next.handle(this.addToken(req, newToken)); 
     }) 
     .catch(err => { 
     authService.logout(); 
     return Observable.throw(err); 
     }) 
     .finally(() => { 
     this.isRefreshingToken = false; 
     }); 
    } else { 
    return authService.tokenSubject 
     .filter(token => token != null) 
     .take(1) 
     .switchMap(token => { 
     return next.handle(this.addToken(req, token)); 
     }); 
    } 
} 

ありがとう： https://www.intertech.com/Blog/angular-4-tutorial-handling-refresh-token-with-new-httpinterceptor/

My機能は、この（もREQを扱う）のように見えます！