Angular2 Http Override 注入路由器答案

【问题标题】：Angular2 Http Override inject RouterAngular2 Http Override 注入路由器
【发布时间】：2016-09-28 15:54:26
【问题描述】：

在使用旧组件路由器的 Angular2 RC4 应用程序中，我们重写了默认的 Http 类以捕获 http 401 未经身份验证的请求并将它们重定向到登录页面。这种重定向发生在 Angular 路由器上。

我们现在想更新到 2.0.1 版并使用新路由器。为此，我们还必须将新路由器注入到自定义 Http 覆盖类中。编译成功，但 Angular 不会运行，因为当应用程序启动时，它会在第一个组件加载之前尝试创建自定义 http 类。在加载第一个组件之前不再可能注入新路由器。

在这里进行的最佳方式是什么？我们应该在实例化 Http 覆盖类之后手动注入路由器吗？怎么可能？

下面是我们在 RC4 中使用旧路由器的自定义 Http 类的代码。更新到最终版本时，问题出在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);
};
}

【问题讨论】：

你为什么用@angular/router-deprecated的路由器。您应该使用来自@angular/router 的那个
正如我在问题中所说，这就是我们的 RC4 版本中的方式。为了迁移到最终版本，旧的@angular/router-deprecated 将随处删除，并使用新的@angular/router。但是我不知道如何将这个类迁移到新的路由器，因为这个类必须在整个应用程序中提供，并且它需要一个路由器。但是在先加载任何组件之前，不能注入新的路由器。

标签： angular dependency-injection angular2-routing

【解决方案1】：

我遇到了同样的问题。尝试将“Router”添加到“deps”：

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

【讨论】：

【解决方案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 类一样

【讨论】：