Skip to content

Instantly share code, notes, and snippets.

@mrgoos
Last active September 17, 2024 21:54
Show Gist options
  • Select an option

  • Save mrgoos/45ab013c2c044691b82d250a7df71e4c to your computer and use it in GitHub Desktop.

Select an option

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());
}
}
@dhurba87

Copy link
Copy Markdown

Good job man. You saved my lot of time.

@rajkumar-patidar

Copy link
Copy Markdown

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