Skip to content

Instantly share code, notes, and snippets.

@mrgoos
Last active May 27, 2022 19:42
Show Gist options
  • Star 34 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save mrgoos/45ab013c2c044691b82d250a7df71e4c to your computer and use it in GitHub Desktop.
Save mrgoos/45ab013c2c044691b82d250a7df71e4c to your computer and use it in GitHub Desktop.
Intercepting http request/respons in Angular 2. Works from version 2.3.0.
...
...
providers: [
{ provide: Http, useClass: ExtendedHttpService }
]
...
...
import { Injectable } from '@angular/core';
import { Request, XHRBackend, RequestOptions, Response, Http, RequestOptionsArgs, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { AuthService } from './auth/auth.service';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable()
export class ExtendedHttpService extends Http {
constructor(backend: XHRBackend, defaultOptions: RequestOptions, private router: Router, private authService: AuthService) {
super(backend, defaultOptions);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
//do whatever
if (typeof url === 'string') {
if (!options) {
options = { headers: new Headers() };
}
this.setHeaders(options);
} else {
this.setHeaders(url);
}
return super.request(url, options).catch(this.catchErrors());
}
private catchErrors() {
return (res: Response) => {
if (res.status === 401 || res.status === 403) {
//handle authorization errors
//in this example I am navigating to logout route which brings the login screen
this.router.navigate(['logout']);
}
return Observable.throw(res);
};
}
private setHeaders(objectToSetHeadersTo: Request | RequestOptionsArgs) {
//add whatever header that you need to every request
//in this example I add header token by using authService that I've created
objectToSetHeadersTo.headers.set('Token', this.authService.getToken());
}
}
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
@Injectable()
export class MyService {
constructor(private http: Http) { } // the provided ExtendedHttpService will be injected here
getFromServer(): Observable<Whatever[]> {
return this.http.get(WHATEVER_URL).map((res: Response) => res.json());
}
}
@duncanhoggan
Copy link

Just implemented this, works great nice and simple. Great platform to build your own logic off.

@dhurba87
Copy link

Good job man. You saved my lot of time.

@rajkumar-patidar
Copy link

How we can use same into angular 6?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment