在Angular 4中刷新令牌以进行多个API调用

Question

I am trying to implement refresh token concept in my web app.

In page refresh i am calling 4 API's and when access-token expires am calling back-end to get a new access-token based on refresh-token.

So in my case am able to get the new access-token but again unable to trigger the 4 API calls until unless am doing page refresh manually or reload the page from service. But i don't want to reload the page and want the API calls to be done without knowing the end user.

Give some suggestion or some idea to do this.

Answer 1

You can use Angular HttpInterceptor to solve your problem. see snippet below.

 @Injectable() export class KgRequestInterceptorService implements HttpInterceptor { authenticationService: MyAuthenticationService; snackbarService: KgSnackbarService constructor(private injector: Injector) { } addBearerAndHeaders(req: HttpRequest<any>, token: string, overwrite?: boolean): HttpRequest<any> { reqHeaders = reqHeaders.set("Authorization", 'Bearer ' + token); return req.clone({ headers: reqHeaders }); } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> { this.authenticationService = this.authenticationService ? this.authenticationService : this.injector.get<MyAuthenticationService>(MyAuthenticationService); return next.handle(this.addBearerAndHeaders(req, this.authenticationService.accessToken)).pipe( catchError((error, cought) => { if (error instanceof HttpErrorResponse) { switch ((<HttpErrorResponse>error).status) { case 400: return this.handle400Error(error); case 401: return this.handle401Error(req, next); case 403: return this.handle403Error(error); default: return _throw(error); } } else { return _throw(error); } }) ) } handle401Error(req: HttpRequest<any>, next: HttpHandler) { if (!this.isRefreshingToken) { this.tokenSubject.next(null); this.isRefreshingToken = true; console.log("isRefreshingToken", this.isRefreshingToken); // Reset here so that the following requests wait until the token // comes back from the refreshToken call. this.authenticationService = this.authenticationService ? this.authenticationService : this.injector.get<KgAuthenticationService>(KgAuthenticationService); this._location = this._location ? this._location : this.injector.get<Location>(Location); return this.authenticationService.renewToken().pipe( switchMap((newToken: string) => { if (newToken) { console.log("newToken Recieved:", newToken); this.tokenSubject.next(newToken); this.authenticationService.storeRenewedToken(newToken); return next.handle(this.addBearerAndHeaders(req, newToken, true)); } // If we don't get a new token, we are in trouble so logout. //return this.logout(); }), catchError(error => { // If there is an exception calling 'refreshToken', bad news so logout. //return this.logout(); }), finalize(() => { this.isRefreshingToken = false; console.log("isRefreshingToken", this.isRefreshingToken); }) ); } else { return this.tokenSubject.pipe( filter(token => token != null), take(1), switchMap(token => { console.log("newtoken:", token.substr(token.length - 20, token.length - 1)) return next.handle(this.addBearerAndHeaders(req, token, true)); }) ) } } handle400Error(error) { if (error && error.status === 400 && error.error && error.error.error === 'invalid_grant') { // If we get a 400 and the error message is 'invalid_grant', the token is no longer valid so logout. return this.logoutUser(); } return _throw(error); } handle403Error(error) { if (error.status === 403) { } return _throw(error); } } 

good article about this is at https://www.intertech.com/Blog/angular-4-tutorial-handling-refresh-token-with-new-httpinterceptor/

Answer 2

In this scenario better is use switchMap when you have one Observable and you need to grab something from another request and return a different Observable, you can use SwitchMap: https://blog.angular-university.io/rxjs-switchmap-operator/

ngOnInit() {
    this._moviesDataService.getShowtimes()
        .switchMap(res => { 
            const id = Object.keys(res[0].showtimes)[0]; // assuming you have one element in your array and you want the first id from showtimes
            return this.getMovies(id); // assuming, you have a separate method that returns the movies
        })
        .subscribe(res => this.results = res)
}