Ionic 3 如何确保在加载视图之前获取数据库数据 [英] Ionic 3 How to ensure db data fetched before view is loaded

问题描述

我正在使用基于令牌的身份验证，并且令牌已保存在数据库中.

I'm using token based authentication and token is already saved on DB.

当应用程序启动时，我需要从数据库中获取令牌并使其可用，然后再进行 API 调用.

When app starts, I need to fetch the token from DB and make it available before making API calls.

最好的方法是:

在组件中:

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

或在共享服务中:

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
}

有什么方法可以确保在加载视图之前获取数据库令牌并将其存储在共享服务中?storage.get 是一个ES6 承诺"

Is there any way I can ensure the DB token is fetched and store in shared services before view is loaded? The storage.get is a 'ES6 promise'

关注是在加载视图升级到任何引导事件之前加载令牌的责任，因此不需要在每个组件中定义 onViewLoad.

Concern is responsibility of loading token before loading view is escalated to any bootstrapping event, so onViewLoad doesn't needs to be defined in each component.

推荐答案

上面的用例我是这样实现的.

I have implemented above use case in this way.

我已经为 CRUD 创建了 ApiService，如下所示.code 是不言自明的，如果您需要更多信息，请告诉我.

I have created ApiService for CRUD like below.That code is self-explanatory and if you need more info please let me know.

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

}

这里我已经创建了用户登录应用时的loggedInUser存储.它也是一个provider如下图.

Here I have created loggedInUser storage when the user logged into the app.It is also a provider as shown below.

social-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);
    });
  }
}

之后，我可以通过我的任何 provider(用于 CRUD 操作)使用上述服务(即 ApiService)，如下所示.

After that, I can consume above service (i.e. ApiService) through any of my provider (for CRUD operations) as shown below.

这是ArticleService.

article-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 approach works perfectly fine for me.Hope this approach will help you too.If you need more help please let me know.

这篇关于Ionic 3 如何确保在加载视图之前获取数据库数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！