angularangular-http-interceptors

Angular: Adding bearer token in interceptor


I'm working with Angular + AWS Cognito

I was able to login and need to add cognito bearer token

@Injectable({
providedIn: 'root',
})
export class InterceptorService implements HttpInterceptor {
constructor(public loaderService: LoaderService, private router: Router) { }

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.getToken().pipe(
        mergeMap((token) => {
            request = request.clone(
                {
                    setHeaders: { Authorization: `Bearer ${token}` }
                });

            return next.handle(request);
        })
    );
}

getToken() {
    return from(
        new Promise((resolve, reject) => {
            Auth.currentSession().then((session) => {
                if (!session.isValid()) {
                    resolve(null);
                } else {
                    resolve(session.getIdToken().getJwtToken());
                }
            }).catch(err => { return resolve(null) });
        })
    );
}
}

This code works fine, the problem is how to handle HttpResponse here?

I tried following code but it didn't work, the request have no Bearer token

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(
            tap(
            (event) => {
                if (event instanceof HttpResponse) {
                    if (event.status !== 200) {
                        console.log('Response', event.status);
                    }
                } else {
                    return this.getToken().pipe(
                       mergeMap((token) => {
                            request = request.clone(
                                {
                                    setHeaders: { Authorization: `Bearer ${token}` }
                                });

                            return next.handle(request);
                        })
                    );
                }
            },
            (error) => {
                 // to handle errors
            }
        )
}

Solution

  • I resolved this with following interceptor code:

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return this.getToken().pipe(
            mergeMap((token) => {
                request = request.clone(
                    {
                        headers: request.headers.set('Authorization', `Bearer ${token}`)
                    });
    
                return next.handle(request).pipe(
                    tap(evt => {
                          // modify here
                    }),
                    catchError((error: any) => {
                        if (error && error.status) {
                            if (error.status == 401) {
                                this.router.navigate(['/']);
                            }
                        } else {
                            return throwError(error);
                        }
                    })
                )
            })
        );
    }
    
    getToken() {
        return from(
            Auth.currentSession().then((session) => {
                if (!session.isValid()) {
                    return null;
                } else {
                    return session.getIdToken().getJwtToken();
                }
            }).catch(err => null)
        );
    }