angular-http-interceptors

How to handle unauthorized requests(status with 401 or 403) with new httpClient in angular 4.3

August 28, 2023 by Tarik

You should use your interceptor and just handle it like this: @Injectable() export class AuthInterceptor implements HttpInterceptor { constructor(private router: Router) { } private handleAuthError(err: HttpErrorResponse): Observable<any> { //handle your auth error or rethrow if (err.status === 401 || err.status === 403) { //navigate /delete cookies or whatever this.router.navigateByUrl(`/login`); // if you’ve caught / handled … Read more

How to cancel current request in interceptor – Angular 4

May 6, 2023 by Tarik

I think all you have to do to cut the interceptor chain is to simply return an empty Observable like so: import { EMPTY } from ‘rxjs’; intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { if (stopThisRequest) { return EMPTY; } return next.handle(request); }

How to add multiple headers in Angular 5 HttpInterceptor

May 4, 2023 by Tarik

Since the set method returns headers object every time, you can do this. This way, original headers from the intercepted request will also be retained. const authReq = req.clone({ headers: req.headers.set(‘Content-Type’, ‘application/json’) .set(‘header2’, ‘header 2 value’) .set(‘header3’, ‘header 3 value’) });

How to mock Angular 4.3 httpClient an error response in testing

May 2, 2023 by Tarik

The expectOne method in HttpTestingController class returns a TestRequest object. This TestRequest class has a flush method which can be used to deliver both successful and unsuccessful responses. We can resolve the request by returning a body along with some additional response headers (if any). Relevant info can be found here. Now, coming back to … Read more

How to cancel/unsubscribe all pending HTTP requests in Angular 4+

February 25, 2023 by Tarik

Checkout the takeUntil() operator from RxJS to globally drop your subscriptions : – RxJS 6+ (using the pipe syntax) import { takeUntil } from ‘rxjs/operators’; export class YourComponent { protected ngUnsubscribe: Subject<void> = new Subject<void>(); […] public httpGet(): void { this.http.get() .pipe( takeUntil(this.ngUnsubscribe) ) .subscribe( (data) => { … }); } public ngOnDestroy(): void { … Read more

AngularJS Authentication + RESTful API

February 24, 2023 by Tarik

This is taken from my blog post on url route authorisation and element security here but I will briefly summaries the main points 🙂 Security in frontend web application is merely a starting measure to stop Joe Public, however any user with some web knowledge can circumvent it so you should always have security server-side … Read more

Add multiple HTTP Interceptors to Angular Application

January 7, 2023 by Tarik

Http doesn’t allow to have more than one custom implementation. But as @estus mentioned the Angular team has added a new HttpClient service recently (release 4.3) which supports multiple interceptors concept. You don’t need to extend the HttpClient as you do with the old Http. You can provide an implementation for HTTP_INTERCEPTORS instead which can … Read more

How to make an angular module to ignore http interceptor added in a core module

January 5, 2023 by Tarik

You can use HttpBackend. Example: import { HttpClient, …, HttpBackend } from ‘@angular/common/http’; @Injectable() export class TestService { private httpClient: HttpClient; constructor( handler: HttpBackend) { this.httpClient = new HttpClient(handler); } …. In this way the service is not intercepted by AuthInterceptor.