angular – ionic 3设置离子存储的默认请求标头

这个问题有点类似 Ionic 2 – Get token from Storage value and set Header before HTTP Request(不重复)

但问题与从本地存储返回值有关.

我需要为所有请求设置默认标头(授权标记).
必须是一个典型的问题,但找不到解决方案.以及大多数可用信息 – 关于为每个请求设置它.这很简单,但不太合理. – 如果可能的话,为什么为每个请求设置为什么.

我试过了：

情况1：

import {Injectable} from "@angular/core";
import {BaseRequestOptions,RequestOptions,RequestOptionsArgs} from "@angular/http";
import { Storage } from '@ionic/storage';


    @Injectable()
    export class MyRequestOptions extends BaseRequestOptions {
      constructor(private storage: Storage) {
        super();
        this.headers.set('Content-Type','application/json');
      }
      merge(options?: RequestOptionsArgs): RequestOptions {
        const newOptions = super.merge(options);

        console.log("setting auth header");

        function setAuthHeader(storage) {
          return storage.get('jwt_token').then(value => {
            newOptions.headers.set('Authorization',`Bearer ${value}`);
            return newOptions;
          });
        }

        return setAuthHeader(this.storage).then(()=>{
          return newOptions;
        })
      }
    }

在这种情况下,它只是没有编译,但它是为了表明我想做什么.

案例#2：

@Injectable()
export class MyRequestOptions extends BaseRequestOptions {
  constructor(private storage: Storage) {
    super();
    this.headers.set('Content-Type','application/json');
  }
  merge(options?: RequestOptionsArgs): RequestOptions {
    const newOptions = super.merge(options);

    console.log("setting auth header");
    return this.getApiToken().flatMap( data => {
      newOptions.headers.set('Authorization',`Bearer ${data}`);
      return newOptions;
    });
  }

  getApiToken(): Observable<RequestOptions> {
    return Observable.fromPromise(this.storage.get('jwt_token'));
  }
}

(它类似于提到的SO主题),但.flatMap()抛出一个错误：

argument of type '(data: Headers) => RequestOptions' is not assignable to parameter of type '(value: Headers,index: number) => ObservableInput<{}>'. Type 'RequestOptions' is not assignable to type 'ObservableInput<{}>'. Type 'RequestOptions' is not assignable to type 'ArrayLike<{}>'. Property 'length' is missing in type 'RequestOptions'.

案例#3：

let api_token = await this.storage.get(‘jwt_token’); – >等待在这里不起作用.

任何想法？

我实际上在我的Ionic应用程序中实现了这个,请看下面：

我创建了一个自定义的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,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,options?: RequestOptionsArgs): Observable<Response> {
    return Observable.fromPromise(
      this.getRequestOptionArgs(options)
    ).mergeMap((options) => {
      return super.put(url,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;
    });
  }
}

在我的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,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,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,//these are just things I needed in my app
    {
      provide: Http,useFactory: httpInterceptorFactory,deps: [XHRBackend,Storage]
    }

  ]
})

export class AppModule {
}

然后在我的提供程序中,我像常规的http请求一样使用它

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

希望这会有所帮助

原文链接：https://www.f2er.com/angularjs/143511.html

angular – ionic 3设置离子存储的默认请求标头

猜你在找的Angularjs相关文章