擴展HTTP - 重定向時返回未經授權

Question

我試圖重定向到登錄頁面，當我得到一個401 HTTP狀態。 拳學嘗試是：

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(); 
     } 
    }); 

}

但是，當我得到的401，我不會進入到地圖的功能，它提供了在瀏覽器未經授權的錯誤。

因此，閱讀一些帖子，有一種方法來擴展http服務，似乎是正確的方式，但當我嘗試實例化app.module.ts上的http依賴關係時遇到一些問題。在我的情況下，我只需要重寫攔截器方法，但如果其他人需要其他部分，我會放置所有代碼。

這裏是我的HTTP擴展：

import { Http, Request, RequestOptionsArgs, Response, XHRBackend, RequestOptions, ConnectionBackend, Headers} from '@angular/http'; 
import { Router } from '@angular/router'; 
import { LocationStrategy, HashLocationStrategy} from '@angular/common'; 
import { Observable } from 'rxjs/Observable'; 
import {Injectable} from '@angular/core'; 

@Injectable() 
export class HttpInterceptor extends Http { 

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

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

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

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

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

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

    getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs { 
     if (options == null) { 
      options = new RequestOptions(); 
     } 
     if (options.headers == null) { 
      options.headers = new Headers(); 
     } 
     options.headers.append('Content-Type', 'application/json'); 
     return options; 
    }; 

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

    } 
}; 

在我app.module.ts我要補充一點：現在

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 { } 

都好，但是當我嘗試使用新我創建的httpInterceptor服務，導入它並將其添加到構造函數中，並替換我的新HTTP攔截器實例的http實例，我得到了ConnectionBackend的No提供程序，我嘗試將ConnectionBackend添加到提供程序，但它說'屬性提供程序的類型不兼容' 。然後我嘗試添加httpInterceptor，但是我得到了Uncaught錯誤：無法解析RequestOptions的所有參數：（？）。

所以總之，必須有一種方法來正確地擴展http方法或以另一種方式處理401 .. 我該怎麼做，是否有一些教程，鏈接或什麼東西來看看？

Answer 1

有沒有註冊令牌ConnectionBackend的供應商。你雖然可以做的是使用一個工廠在配置攔截

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

我和你的代碼進行了測試，它應該工作。