Ionic 3 So stellen Sie sicher, dass DB-Daten abgerufen werden, bevor die Ansicht geladen wird

Question

Ich verwende Token-basierte Authentifizierung und Token ist bereits in DB gespeichert.

Wenn App startet, muss ich das Token aus der DB abrufen und vor dem API-Aufruf zur Verfügung stellen.

Was bester Weg, es zu tun ist:

In Komponente:

ngOnit() { 
storage.get('token').then((val) => { 
    Make api call here 
}); 
} 

oder in Shared-Service:

getToken() { 
    return Promise((resolve, reject)=>{ 
     #if fetched once save in local var and resolve token 
     #or fetch from DB and resolve token 
    }) 
} 

// On Component 
this.sharedService.getToken().then((token)=>{ 
    //Make api call 
} 

Gibt es eine Möglichkeit, die DB-Token sicherstellen kann abgerufen und in freigegebenen Diensten speichern, bevor die Ansicht geladen wird? Das storage.get ist ein "ES6-Versprechen"

Bedenken ist die Verantwortung des Ladens von Token, bevor die Ladeansicht zu irgendeinem Bootstrapping-Ereignis eskaliert wird, so dass onViewLoad nicht in jeder Komponente definiert werden muss.

Answer 1

Ich habe oben genannten Anwendungsfall auf diese Weise implementiert.

Ich habe ApiService für CRUD wie unten erstellt. Das code ist selbsterklärend und wenn Sie weitere Informationen benötigen, lassen Sie es mich bitte wissen.

api-service.ts

import { Injectable, } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import { Headers, RequestOptions, BaseRequestOptions } from '@angular/http'; 
import { Storage } from '@ionic/storage'; 
import { Events } from 'ionic-angular'; 

@Injectable() 
export class ApiService { 

    constructor(private http: Http, private storage: Storage, private events: Events) { } 

    createHeader(headers: Headers) { 
     return new Promise((resolve, reject) => { 
      this.storage.get('loggedInUser') 
       .then((token: any) => { 
        if (token) headers.append('Authorization', 'token ' + token.token); 
        resolve(headers); 
       }, err => { 
        resolve(headers); 
       }); 
     }); 
    } 

    get(api) { 
     let header = new Headers(); 
     return Observable.fromPromise(this.createHeader(header)) 
      .map(() => { 
       let options = new BaseRequestOptions(); 
       options.withCredentials = true; 
       options.headers = header; 
       return options 
      }) 
      .switchMap((options) => this.http.get(api, options)) 
      .catch((err: Error | Response) => { 
       if (err instanceof Response && err.status === 401) { 
        this.events.publish('token-expiration'); 
       } 
       return Observable.throw(err); 
      }); 
    } 

    post(url, params): Observable<any> { 
     return new Observable(observer => { 
      let header = new Headers(); 
      this.createHeader(header) 
       .then(() => { 
        let options = new RequestOptions({ headers: header }); 
        this.http.post(url, params, options) 
         .subscribe(response => { 
          observer.next(response); 
          observer.complete(); 
         }, (e) => { 
          observer.error(e); 
         }); 
       }) 
     }) 
    } 

    delete(url) { 
     return new Observable(observer => { 
      let header = new Headers(); 
      this.createHeader(header) 
       .then(() => { 
        return this.http.delete(url, { headers: header, withCredentials: true }) 
         .subscribe(response => { 
          observer.next(response); 
          observer.complete(); 
         }); 
       }) 
     }); 
    } 

} 

Here I loggedInUser Lagerung, wenn der Benutzer in das app.It angemeldet geschaffen haben, ist auch ein provider wie unten gezeigt.

sozial login.ts

import { Injectable } from '@angular/core'; 
import { ApiService } from "../providers"; 
import { LocalCacheServiceProvider } from "../local-cache-service/local-cache-service"; 
import { UserService } from "../user-provider"; 
import { Storage } from '@ionic/storage'; 


@Injectable() 
export class SocialLoginProvider { 

    constructor(private apiService: ApiService, private localCacheService: LocalCacheServiceProvider, private userService: UserService, private storage: Storage) { 
    } 

    //login To App 
    loginToApp(url: string, data: string) { 
    this.apiService.post(url, { access_token: data }) 
     .map((res: any) => res.json()) 
     .subscribe(res => { 
     this.setUserLocally(res); 
     }); 
    } 

    //set User Locally 
    setUserLocally(user) { 
    this.localCacheService.clearAllKeys().then(() => { 
     this.userService.setLoggedInUser(user); 
     this.storage.set('loggedInUser', user); 
    }); 
    } 
} 

Danach habe ich oben Service konsumieren kann (das heißt ApiService) durch jede meiner provider (für CRUD Operationen), wie unten gezeigt.

Dies ist die ArticleService.

Artikel-service.ts

import { Injectable } from '@angular/core'; 
import { Observable } from "rxjs/Observable"; 
import 'rxjs/add/operator/map'; 
import { config } from '../config/config'; 
import { ApiService } from './api-service'; 


@Injectable() 
export class ArticleService { 

    constructor(private apiService: ApiService) { 
    } 

    getBookById(id) { 
     return this.apiService.get(`${config.getBookById}${id}/`).map((res: any) => res.json()); 
    } 
} 

Above Ansatz funktioniert für me.Hope völlig in Ordnung, dieser Ansatz Ihnen helfen too.If Sie weitere Hilfe benötigen Sie mich bitte.