説明
私が見つけた最良の解決策は、上書きすることであるXHRBackendようにHTTP応答ステータス401と403、特定のアクションにリードを。
Angularアプリケーションの外部で認証を処理する場合、外部メカニズムがトリガーされるように現在のページを強制的に更新できます。このソリューションについては、以下の実装で詳しく説明します。
Angularアプリケーションがリロードされないように、アプリケーション内のコンポーネントに転送することもできます。
実装
角度> 2.3.0
@mrgoosのおかげで、モジュールを直接拡張するangular 2.3.0（バグhttps://github.com/angular/angular/issues/11606を参照）のバグ修正により、angular 2.3.0+の簡略化されたソリューションがここにありHttpます。
import { Injectable } from '@angular/core';
import { Request, XHRBackend, RequestOptions, Response, Http, RequestOptionsArgs, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable()
export class AuthenticatedHttpService extends Http {
constructor(backend: XHRBackend, defaultOptions: RequestOptions) {
super(backend, defaultOptions);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
return super.request(url, options).catch((error: Response) => {
if ((error.status === 401 || error.status === 403) && (window.location.href.match(/\?/g) || []).length < 2) {
console.log('The authentication session expires or the user is not authorised. Force refresh of the current page.');
window.location.href = window.location.href + '?' + new Date().getMilliseconds();
}
return Observable.throw(error);
});
}
}
モジュールファイルには、次のプロバイダーのみが含まれています。
providers: [
{ provide: Http, useClass: AuthenticatedHttpService }
]
ルーターと外部認証サービスを使用する別のソリューションは、@ mrgoosによる次の要点で詳しく説明されています。
Angular 2.3.0より前
次の実装はAngular 2.2.x FINALおよびで機能しRxJS 5.0.0-beta.12ます。
HTTPコード401または403が返された場合、現在のページ（および一意のURLを取得してキャッシュを回避するためのパラメーター）にリダイレクトします。
import { Request, XHRBackend, BrowserXhr, ResponseOptions, XSRFStrategy, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
export class AuthenticationConnectionBackend extends XHRBackend {
constructor(_browserXhr: BrowserXhr, _baseResponseOptions: ResponseOptions, _xsrfStrategy: XSRFStrategy) {
super(_browserXhr, _baseResponseOptions, _xsrfStrategy);
}
createConnection(request: Request) {
let xhrConnection = super.createConnection(request);
xhrConnection.response = xhrConnection.response.catch((error: Response) => {
if ((error.status === 401 || error.status === 403) && (window.location.href.match(/\?/g) || []).length < 2) {
console.log('The authentication session expires or the user is not authorised. Force refresh of the current page.');
window.location.href = window.location.href + '?' + new Date().getMilliseconds();
}
return Observable.throw(error);
});
return xhrConnection;
}
}
次のモジュールファイルで。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule, XHRBackend } from '@angular/http';
import { AppComponent } from './app.component';
import { AuthenticationConnectionBackend } from './authenticated-connection.backend';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
entryComponents: [AppComponent],
imports: [
BrowserModule,
CommonModule,
HttpModule,
],
providers: [
{ provide: XHRBackend, useClass: AuthenticationConnectionBackend },
],
})
export class AppModule {
}