Angular2 Http覆蓋注入路由器

Question

在帶有舊組件路由器的Angular2 RC4應用程序中，我們覆蓋了默認的Http類，以捕獲http 401未經身份驗證的請求，並將其重定向到登錄頁面。 這種重定向發生在Angular路由器上。

我們想立即更新到版本2.0.1，並使用新的路由器。 為此，我們還必須將新路由器注入到自定義Http覆蓋類中。 編譯成功，但是Angular無法運行，因為當應用程序啟動時，它將嘗試在加載第一個組件之前創建自定義http類。 在加載第一個組件之前，不再可能注入新路由器。

進行此操作的最佳方法是什么？ 我們應該在實例化Http覆蓋類之后手動注入Router嗎？ 那怎么辦？

以下是我們的自定義Http類的代碼，該代碼可在RC4中與舊路由器一起使用。 更新到最終版本時，問題出在catchUnauthorized中，因為路由器無法再注入到此類中。

import {Injectable} from "@angular/core";
import {Http, Headers, ConnectionBackend, RequestOptions, RequestOptionsArgs, Response, Request} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Router} from '@angular/router-deprecated';

@Injectable()
export class CustomHttp extends Http {
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private router: Router) {
    super(backend, defaultOptions);
}

postJson(url: string, object: any, options: RequestOptionsArgs = {}): Observable<Response> {
    var body = JSON.stringify(object);

    if(!options.headers)
    {
        options.headers = new Headers();
    }

    options.headers.set("Content-Type", "application/json");

    return this.post(url, body, options);
}

request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return super.request(url, options)
        .catch(this.catchUnauthorized);
}

get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return super.get(url, options)
        .catch(this.catchUnauthorized);
}

post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    return super.post(url, body, options)
        .catch(this.catchUnauthorized);
}

put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    return super.put(url, body, options)
        .catch(this.catchUnauthorized);
}

delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return super.delete(url, options)
        .catch(this.catchUnauthorized);
}

patch(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    return super.patch(url, body, options)
        .catch(this.catchUnauthorized);
}

head(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return super.head(url, options)
        .catch(this.catchUnauthorized);
}

public catchUnauthorized = (error: Response) => {
    if (error.status === 401 || error.status === 440) {
        var currentInstruction = this.router.currentInstruction;
        var instruction = this.router.generate(["/Login", { "session": "true", "returnUrl": currentInstruction.toLinkUrl() }]);

        if (currentInstruction.urlPath != instruction.urlPath)
            this.router.navigateByInstruction(instruction);

        return Observable.throw('Sessie verlopen!');
    }
    if (error.status === 403) {
        this.router.navigate(['/Error', { 'error': 'forbidden' }]);
        return Observable.throw('Forbidden!');
    }
    return Observable.throw(error);
};
}

Answer 1

我有同樣的問題。 嘗試將“ Router”添加到“ deps”：

...
providers: [
{
  provide: CustomHttp,
  useFactory: (backend: XHRBackend, options: RequestOptions, route: Router) => {
    return new CustomHttp(backend, options, route);
  },
  deps: [ XHRBackend, RequestOptions, Router ]
}
...

Answer 2

如果您想使用自定義類，但凡是從“ @ angular / http”導入的內容，提供程序都必須從“ @ angular / http”提供Http類，

import {Http} from '@angular/http';
import {CustomHttp} from 'my/custom/location';

function httpFactory(backend, options){
   return new CustomHttp(backend, options);
}

{
   provide: Http,
   useFactory: httpFactory,
   deps: [XHRBackend, RequestOptions]
}

您甚至可以將httpFactory方法放入與CustomHttp類相同的文件中