Расширить 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, кажется, правильный путь, но у меня возникают некоторые проблемы, когда я пытаюсь создать зависимости http от app.module.ts. В моем случае мне нужно только переписать метод перехватчика, но я помещаю весь код, если кому-то еще нужна другая часть.

Вот мое расширение 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, я пытаюсь добавить ConnectionBackend поставщикам, но там говорится, что "типы поставщиков недвижимости несовместимы". Затем я пытаюсь добавить httpInterceptor, но получаю Uncaught Error: Не удается разрешить все параметры для 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 ]
  }
]

Я проверил это с вашим кодом, и оно должно работать.