Angular 扩展HTTP-返回未经授权时重定向

当我获得401HTTP状态时，我试图重定向到登录页面。 第一次尝试是：

public getPatients(extraHttpRequestParams?: any): Observable<Array<models.Patient>> {
const path = this.basePath + '/api/patient';

let queryParameters = new URLSearchParams();
let headerParams = this.defaultHeaders;
let requestOptions: RequestOptionsArgs = {
    method: 'GET',
    headers: headerParams,
    search: queryParameters
};

return this.httpInterceptor.request(path, requestOptions)
    .map((response: Response) => {
        if (response.status === 204) {
            return undefined;
        } else {
            if (response.status === 401) {
                this.router.navigate(['/login']);
            }
            return response.json();
        }
    });

现在一切都很好，但是当我尝试使用我创建的新httpInterceptor服务，导入它并将其添加到构造函数中，并替换新http interceptor实例的http实例时，我得到了一个ConnectionBackend的无提供程序，我尝试将ConnectionBackend添加到提供程序中，但它说“属性提供程序的类型不兼容”。然后我尝试添加httpInterceptor，但得到了未捕获的错误：无法解析RequestOptions:（？）的所有参数

总之，必须有一种方法来正确扩展http方法或以另一种方式处理401。。

---

我怎样才能做到这一点，是否有一些教程，链接或东西来看看

没有使用令牌注册的提供程序

ConnectionBackend

。不过，您可以在配置拦截器时使用工厂

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

---

我已经用您的代码对此进行了测试，它应该可以工作。

您使用的是什么版本？我使用的是版本rc6I我使用http发出请求，但我必须实例化这个新的http HttpInterceptor，而不是这个.http.request。。。我使用这个.http.httpInterceptor。我认为使用该工厂不需要为我的HttpInterceptor替换http，它只需要使用它。有没有办法不替换并告诉angular始终使用我的HttpInterceptor？使用

provide:Http

如果仍然不起作用（它仍然使用正常的Http），那么您可能需要摆脱

HttpModule

导入，并提供

Http

依赖的所有依赖项。您可以查看源代码，了解您是否正在尝试使用

Http

，而不是

HttpInterceptor

？

provide

提供您可以注入的令牌。如果将其更改为

Http

，则不能再注入

HttpInterceptor

。但是实际的

Http

对象仍然应该是您的自定义拦截器，因为这是您从工厂返回的对象确保您没有尝试在任何地方注入

HttpInterceptor

。您应该只尝试注入

Http

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { routing, appRoutingProviders } from './app.routing';
import { FormsModule }    from '@angular/forms';
import { Routes, RouterModule }   from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PatientsComponent } from './pacientes/pacientes.component';
import { HttpInterceptor }  from '../api/api/HttpInterceptor';
import { RequestOptions, ConnectionBackend} from '@angular/http';
import { HttpModule, JsonpModule } from '@angular/http';
const routes: Routes = [

];

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,
    routing,
    RouterModule.forRoot(routes, { useHash: true }),  // .../#/crisis-center/
  ],
  declarations: [
    AppComponent,
    PatientsComponent,
  ],
  providers: [
    appRoutingProviders,
    HttpInterceptor,
    RequestOptions 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

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