Incorporating this feature into my Ionic Application was quite seamless, as demonstrated below:
To begin, I crafted a personalized Http Interceptor,
http.interceptor.ts
import { Events } from 'ionic-angular';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import 'rxjs';
import { Storage } from '@ionic/storage';
import {Http, RequestOptionsArgs, Response, RequestOptions, ConnectionBackend, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Storage} from '@ionic/storage';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
export class HttpInterceptor extends Http {
constructor(connectionBackend: ConnectionBackend, requestOptions: RequestOptions, public storage: Storage) {
super(connectionBackend, requestOptions);
}
public get(url: string, options?: RequestOptionsArgs): Observable<Response> {
return Observable.fromPromise(
this.getRequestOptionArgs(options)
).mergeMap((options) => {
return super.get(url, options)
});
}
public post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return Observable.fromPromise(
this.getRequestOptionArgs(options)
).mergeMap((options) => {
return super.post(url, body, options)
})
}
public put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return Observable.fromPromise(
this.getRequestOptionArgs(options)
).mergeMap((options) => {
return super.put(url, body, options)
})
}
public delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
return Observable.fromPromise(
this.getRequestOptionArgs(options)
).mergeMap((options) => {
return super.delete(url, options)
});
}
private getRequestOptionArgs(options?: RequestOptionsArgs) {
return this.storage.get('token').then((token) => {
if (options == null) {
options = new RequestOptions();
}
if (options.headers == null) {
options.headers = new Headers();
}
if (token !== null) {
options.headers.append('Authorization', 'Bearer ' + token);
}
options.headers.append('Content-Type', 'application/json');
return options;
});
}
}
Within app.module.ts
app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {IonicApp, IonicModule} from 'ionic-angular';
import {Storage, IonicStorageModule} from '@ionic/storage';
import {HttpModule, XHRBackend, RequestOptions, Http} from '@angular/http';
import {HttpInterceptor} from '../auth/http.interceptor';
import {SplashScreen} from "@ionic-native/splash-screen";
import {StatusBar} from '@ionic-native/status-bar';
import {Keyboard} from '@ionic-native/keyboard';
import {InAppBrowser} from '@ionic-native/in-app-browser';
export function httpInterceptorFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions, storage: Storage) {
return new HttpInterceptor(xhrBackend, requestOptions, storage);
}
@NgModule({
declarations: [
...
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {mode: 'md'}),
IonicStorageModule.forRoot(),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
...
],
providers: [StatusBar, SplashScreen, Keyboard, InAppBrowser,
provide: Http,
useFactory: httpInterceptorFactory,
deps: [XHRBackend, RequestOptions, Storage]
]
})
export class AppModule {
}
Subsequently, in the provider, I utilized it akin to a standard http request
app.provider.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import { CONFIG } from '../config/app.config';
@Injectable()
export class AppProvider {
private baseUrl:string = CONFIG.apiEndpoint;
constructor(private http: Http) {
}
public getSomething():Observable<any> {
let url:string = this.baseUrl + 'some endpoint';
return this.http.get(url).map((res:Response) => res.json());
}
}
This implementation proved beneficial for my application's functionality.