web-dev-qa-db-ja.com

拡張する方法angular 2 http class in Angular 2 final

angular 2 httpクラスをグローバルエラーを処理し、secureHttpサービスのヘッダーを設定できるようにしようとしています。いくつかの解決策を見つけましたが、最終リリース= Angular 2.私のコードがあります：

ファイル：secureHttp.service.ts

import { Injectable } from '@angular/core';
import { Http, ConnectionBackend, Headers, RequestOptions, Response, RequestOptionsArgs} from '@angular/http';

@Injectable()
export class SecureHttpService extends Http {

  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }
}

ファイル：app.module.ts

    import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { routing } from './app.routes';
import { AppComponent } from './app.component';
import { HttpModule, Http, XHRBackend, RequestOptions } from '@angular/http';
import { CoreModule } from './core/core.module';
import {SecureHttpService} from './config/secure-http.service'

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    CoreModule,
    routing,
    HttpModule,
  ],
  providers: [
    {
      provide: Http,
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => {
        return new SecureHttpService(backend, defaultOptions);
      },
      deps: [ XHRBackend, RequestOptions]
    }, Title, SecureHttpService],
  bootstrap: [AppComponent],
})
export class AppModule { }

component.ts

constructor(private titleService: Title, private _secure: SecureHttpService) {}

  ngOnInit() {
    this.titleService.setTitle('Dashboard');
    this._secure.get('http://api.example.local')
        .map(res => res.json())
        .subscribe(
            data =>  console.log(data) ,
            err => console.log(err),
            () => console.log('Request Complete')
        );
  }

今のところ、「ConnectionBackendのプロバイダーがありません！」というエラーが返されます。手伝ってくれてありがとう！

angularangular2-services
24
mezhik91

エラーの理由は、SecureHttpServiceを提供しようとしているためです。

providers: [SecureHttpService]

これは、Angularはインスタンスを作成しようとしますが、ファクトリを使用してnotを実行します。そして、提供するトークンConnectionBackendで登録されたプロバイダーがありませんあなたのコンストラクタ。

SecureHttpServiceからprovidersを削除することもできますが、それにより別のエラーが発生します（最初に追加した理由です）。エラーは、コンストラクターに挿入しようとしているため、「SecureHttpServiceのプロバイダーがありません」のようなものになります。

constructor(private titleService: Title, private _secure: SecureHttpService) {}

ここで、トークンについて理解する必要があります。 provideの値として指定するのは、tokenです。

{
  provide: Http,
  useFactory: ()
}

トークンは、注入できるものです。したがって、代わりにHttpを挿入することができ、それはyour created SecureHttpServiceを使用します。ただし、これにより、通常のHttpが必要になった場合に使用する可能性がなくなります。

constructor(private titleService: Title, private _secure: Http) {}

SecureHttpServiceについて何も知る必要がない場合は、このままにしておくことができます。

SecureHttpService型を実際に注入できるようにする場合（そのAPIが必要な場合や、通常のHttpを他の場所で使用できる場合）、provideを変更するだけです

{
  provide: SecureHttpService,
  useFactory: ()
}

これで、通常のHttpとSecureHttpServiceの両方を注入できます。また、SecureHttpServiceからprovidersを削除することを忘れないでください。

22
Paul Samsotha

Angular 2.1.1のHttpクラスを拡張する方法について、私の 記事 を確認してください。

最初に、カスタムHTTPプロバイダークラスを作成します。

http.service.ts

import {Injectable} from '@angular/core';
import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class HttpService extends Http {

  constructor (backend: XHRBackend, options: RequestOptions) {
    let token = localStorage.getItem('auth_token'); // your custom token getter function here
    options.headers.set('Authorization', `Bearer ${token}`);
    super(backend, options);
  }

  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    let token = localStorage.getItem('auth_token');
    if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
      if (!options) {
        // let's make option object
        options = {headers: new Headers()};
      }
      options.headers.set('Authorization', `Bearer ${token}`);
    } else {
    // we have to add the token to the url object
      url.headers.set('Authorization', `Bearer ${token}`);
    }
    return super.request(url, options).catch(this.catchAuthError(this));
  }

  private catchAuthError (self: HttpService) {
    // we have to pass HttpService's own instance here as `self`
    return (res: Response) => {
      console.log(res);
      if (res.status === 401 || res.status === 403) {
        // if not authenticated
        console.log(res);
      }
      return Observable.throw(res);
    };
  }
}

ここで、メインモジュールを構成して、カスタムHTTPクラスにXHRBackendを提供する必要があります。メインモジュール宣言で、プロバイダー配列に次を追加します。

app.module.ts

import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { HttpService } from './services/http.service';
...
@NgModule({
  imports: [..],
  providers: [
    {
      provide: HttpService,
      useFactory: (backend: XHRBackend, options: RequestOptions) => {
        return new HttpService(backend, options);
      },
      deps: [XHRBackend, RequestOptions]
    }
  ],
  bootstrap: [ AppComponent ]
})

その後、サービスでカスタムhttpプロバイダーを使用できるようになりました。例えば：

user.service.ts

import { Injectable }     from '@angular/core';
import {HttpService} from './http.service';

@Injectable()
class UserService {
  constructor (private http: HttpService) {}

  // token will added automatically to get request header
  getUser (id: number) {
    return this.http.get(`/users/${id}`).map((res) => {
      return res.json();
    } );
  }
}
21
Adones Pitogo

peeskillet's answer が選択された答えであるべきだと思うので、私がここに置いているのはそれと競合するのではなく彼の答えを増やすことだけを意味しますが、私は「peeskilletのコードの答えが何を意味するのか、100％明確だとは思わない.

app.module.tsのprovidersセクションに以下を配置します。カスタムHttp置換MyHttpを呼び出しています。

Peeskilletが言ったように、provide: Httpではなくprovide: MyHttpになることに注意してください。

  providers: [
    AUTH_PROVIDERS
    {
      provide: Http,
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => {
        return new MyHttp(backend, defaultOptions);
      },
      deps: [XHRBackend, RequestOptions]
    }
  ],

それから私のHttp- extendingクラスは次のように定義されます：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class MyHttp extends Http {
  get(url: string, options?: any) {
    // This is pointless but you get the idea
    console.log('MyHttp');
    return super.get(url, options);
  }
}

アプリがMyHttpの代わりにHttpを使用するために特別なことをする必要はありません。

3
Jason Swett

Angular 4.3から、extends httpもう。代わりに、HttpInterceptorとHttpClientを使用して、これらすべてをアーカイブできます。

Httpを使用するよりも似ており、簡単です。

約2時間でHttpClientに移行しました。

詳細は こちら

2
Frank Nguyen

実際には、独自のクラスでHttpを拡張し、カスタムファクトリを使用してHttpを提供することができます。

その後、アプリプロバイダーでカスタムファクトリを使用して 'Http'を提供できました

import {RequestOptions、Http、XHRBackend} from '@ angular/http';

class HttpClient extends Http {
 /*
  insert your extended logic here. In my case I override request to
  always add my access token to the headers, then I just call the super 
 */
  request(req: string|Request, options?: RequestOptionsArgs): Observable<Response> {

      options = this._setCustomHeaders(options);
      // Note this does not take into account where req is a url string
      return super.request(new Request(mergeOptions(this._defaultOptions,options, req.method, req.url)))
    }

  }
}

function httpClientFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions): Http {

  return new HttpClient(xhrBackend, requestOptions);
}

@NgModule({
  imports:[
    FormsModule,
    BrowserModule,
  ],
  declarations: APP_DECLARATIONS,
  bootstrap:[AppComponent],
  providers:[
     { provide: Http, useFactory: httpClientFactory, deps: [XHRBackend, RequestOptions]}
  ],
})
export class AppModule {
  constructor(){

  }
}

このアプローチでは、変更したくないHttp関数をオーバーライドする必要はありません。

0
jonnie

https://www.illucit.com/blog/2016/03/angular2-http-authentication-interceptor/ で確認できます。

最新リリースのためにプロバイダーを以下のように変更し、確認してください：

providers: [
  {
    provide: SecureHttpService,
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => {
      return new SecureHttpService(backend, defaultOptions);
    },
    deps: [ XHRBackend, RequestOptions]
  },
  Title
]
0
ranakrunal9