2016-10-10 9 views
1

httpリクエストの開始を検出する可能性があります。 httpwrapperサービスを提供している角度2でこれを行うのhttpリクエストの開始と、angular2内のすべてのリクエストの終了を検出します。

import {Injectable, Inject} from "@angular/core"; 
import { Http, Response, Headers, RequestOptions } from "@angular/http"; 
import { StorageServiceClass } from "../storage.service"; 
import "rxjs/add/operator/map"; 
import * as Cookies from "js-cookie"; 

import { Observable } from "rxjs/Rx"; 
import { Router } from "@angular/router"; 


@Injectable() 
export class HttpClient { 

    public storage: StorageServiceClass; 

    private http: Http; 
    private router: Router; 

    constructor(private _http: Http, _router: Router, private _storage: StorageServiceClass) { 
     this.http = _http; 
     this.router = _router; 
     this.storage = _storage; 
    } 

    public setToken() { 
     let token = Cookies.get("authToken"); 
     if (token !== "undefined" && token !== undefined) { 
      this.storage.setAuthToken(token); 
     } 
    } 

    public removeStorageAndCookies() { 
     Cookies.remove("authToken"); 
     this.storage.removeAuthToken(); 
    } 

    public createAuthorizationHeader(headers: Headers) { 
     let token = this.storage.getAuthToken(); 
     headers.append("Accept", "application/json"); 
     headers.append("Content-Type", "application/json"); 

     if (token !== null && token !== undefined) { 
      headers.append("Authorization", "JWT " + token); 
     } 
    } 

    public post(url: string, data: any, options?: RequestOptions) { 
     let headers = new Headers(); 
     if (options !== undefined) { 
      headers = options.headers; 
     } 
     this.createAuthorizationHeader(headers); 
     let dataResp = this.intercept(this.http.post(url, data, { headers: headers, withCredentials: true })); 
     this.setToken(); 
     return dataResp; 
    } 


    public put(url: string, data: any, options?: RequestOptions) { 
     let headers = new Headers(); 
     if (options !== undefined) { 
      headers = options.headers; 
     } 
     this.createAuthorizationHeader(headers); 
     let dataResp = this.intercept(this.http.put(url, data, { headers: headers, withCredentials: true })); 
     this.setToken(); 
     return dataResp; 
    } 

    public delete(url: string, options?: RequestOptions) { 
     let headers = new Headers(); 
     if (options !== undefined) { 
      headers = options.headers; 
     } 
     this.createAuthorizationHeader(headers); 
     let dataResp = this.intercept(this.http.delete(url, { headers: headers, withCredentials: true })); 
     this.setToken(); 
     return dataResp; 
    } 


    public get(url: string, data?: any, options?: RequestOptions) { 
     let headers = new Headers(); 
     if (options !== undefined) { 
      headers = options.headers; 
     } 
     this.createAuthorizationHeader(headers); 

     let urlParams = ""; 
     if (data) { 
      urlParams = jQuery.param(data); 
     } 

     let dataResp = this.intercept(this.http.get(url, { 
      headers: headers, search: urlParams, withCredentials: true 
     })); 
     this.setToken(); 
     return dataResp; 
    } 

    public intercept(observable: Observable<Response>): Observable<Response> { 
     return observable.catch((err, source) => { 
      if (err.status === 401) { 
       this.removeStorageAndCookies(); 
       this.router.navigate(["login"]); 
       return Observable.empty(); 
      } else { 
       return Observable.throw(err); 
      } 
     }); 
    } 

} 
+0

助けてください:D –

答えて

2

推奨される方法: は、これは私のカスタムHTTPサービスです。これは次のようになります。

@Injectable() 
export class CustomHttp extends Http { 
    private activeCalls: number; 
    private store: Store<ApplicationState>; 

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, store: Store<ApplicationState>) { 
     super(backend, defaultOptions); 
     this.store = store; 
     this.activeCalls = 0; 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
     this.httpCallRequested(); 

     return super.get(url, options).finally(
      () => { 
       this.httpCallReady(); 
      } 
     ); 
    } 
} 

これは不完全な例です。ここをクリックしてください:https://github.com/brechtbilliet/winecellar/blob/master/src/app/customHttp.ts

このクラスはすべてのhttp呼び出しをラップし、実行前と実行後に何かをすることを許可します。 通常のHTTPサービスの代わりにこのラッパーをどこでも使用するには、このクラスをアプリケーションモジュールで提供する必要があります。これは次のようにすることができます:

@NgModule({ 
    imports: [BrowserModule, AboutModule, AuthenticationModule, CommonLogicModule, StockModule, routing], 
    declarations: [ApplicationContainer], 
    exports: [ApplicationContainer], 
    providers: [ 
     AppSandbox, 
     { 
      provide: Http, 
      useFactory: customHttpFactory, 
      deps: [XHRBackend, RequestOptions, Store] 
     } 
    ] 
}) 

プロバイダの部分に注目してください。このモジュールの下のすべてのモジュールは、角度2のDIメカニズムのおかげで、 'Http'を注入すると、httpWrapperのインスタンスを取得します。

+0

umm ...ありがとう...あなたの解決策に興味があります(y) –

関連する問題