package.json

@@ -24,8 +24,10 @@
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.7.1",
+    "@ionic/storage": "^2.2.0",
     "cordova-android": "8.1.0",
     "cordova-plugin-geolocation": "^4.0.2",
+    "cordova-sqlite-storage": "^3.4.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.5.1",
     "tslib": "^1.9.0",
@@ -74,10 +76,11 @@
         "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
       },
       "cordova-plugin-ionic-keyboard": {},
-      "cordova-plugin-geolocation": {}
+      "cordova-plugin-geolocation": {},
+      "cordova-sqlite-storage": {}
     },
     "platforms": [
       "android"
     ]
   }
-}
\ No newline at end of file
+}

src/app/app.module.ts

+// ionic native dependencies
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
 
+// ionic native dependencies
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { IonicStorageModule } from '@ionic/storage';
 
+// custom dependencies
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
-import { Geolocation } from '@ionic-native/geolocation/ngx';
-
-import { HttpClientModule } from '@angular/common/http';
-
 import { RestService } from './rest.service';
 
 @NgModule({
@@ -21,7 +23,8 @@ import { RestService } from './rest.service';
     BrowserModule,
     HttpClientModule,
     IonicModule.forRoot(),
-    AppRoutingModule
+    AppRoutingModule,
+    IonicStorageModule.forRoot()
   ],
   providers: [
     Geolocation,

src/app/home/home.page.ts

@@ -3,14 +3,17 @@ import { Geolocation } from '@ionic-native/geolocation/ngx';
 import { RestService } from '../rest.service';
 import { Observable } from 'rxjs';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Storage } from '@ionic/storage';
 
 
 declare var H: any;
+
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
 })
+
 export class HomePage {
   private platform: any;
   private map: any;
@@ -39,7 +42,8 @@ export class HomePage {
 
   constructor(private geolocation: Geolocation,
     public restService: RestService,
-    public httpClient: HttpClient) {
+    public httpClient: HttpClient,
+    private storage: Storage) {
 
     this.platform = new H.service.Platform({
       'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
@@ -59,22 +63,21 @@ export class HomePage {
   }
 
   getBikesList() {
-    this.geolocation.getCurrentPosition(
-      {
-        maximumAge: 1000, timeout: 5000,
-        enableHighAccuracy: true
-      }
-    ).then((resp) => {
+    this.geolocation.getCurrentPosition({
+      maximumAge: 1000, timeout: 5000,
+      enableHighAccuracy: true
+    }).then((resp) => {
       this.currentLocation.lat = resp.coords.latitude;
       this.currentLocation.lng = resp.coords.longitude;
-      let url = 'http://193.196.52.237:8081/admin/bikes' + '?lat=' + this.currentLocation.lat + '&lng=' + this.currentLocation.lng;
-      const  headers = new  HttpHeaders().set("Authorization", "Bearer " + this.restService.getToken());
-      this.bikeApi = this.httpClient.get(url, {headers});
-      this.bikeApi
-        .subscribe((resp) => {
+      this.storage.get('token').then((token) => {
+        let url = 'http://193.196.52.237:8081/bikes' + '?lat=' + this.currentLocation.lat + '&lng=' + this.currentLocation.lng;
+        const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
+        this.bikeApi = this.httpClient.get(url, { headers });
+        this.bikeApi.subscribe((resp) => {
           console.log('my data: ', resp);
-          this.bikes = resp.data;
+          this.bikes = resp;
         }, (error) => console.log(error));
+      });
     }, er => {
       alert('Can not retrieve Location')
     }).catch((error) => {

src/app/rest.service.ts

 import { Injectable } from '@angular/core';
+import { Storage } from '@ionic/storage';
 
 @Injectable({
   providedIn: 'root'
 })
 export class RestService {
 
-  token: String;
-  
-  constructor() { }
+  constructor(private storage: Storage) { }
 
   setToken(token) {
-    this.token = token;
+    // set a key/value
+    this.storage.set('token', token);
   }
 
   getToken() {
-    return this.token;
+    this.storage.get('token').then((val) => {
+      console.log('token', val);
+      return val;
+    });
   }
 }