を持っています auth-interceptor.service.ts
リクエストを処理する
import {Injectable} from '@angular/core';
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {Cookie} from './cookie.service';
import {Router} from '@angular/router';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private router: Router) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// Clone the request to add the new header.
const authReq = req.clone({headers: req.headers.set(Cookie.tokenKey, Cookie.getToken())});
// Pass on the cloned request instead of the original request.
return next.handle(authReq).catch(this.handleError);
}
private handleError(err: HttpErrorResponse): Observable<any> {
console.log(err);
if (err.status === 401 || err.status === 403) {
Cookie.deleteUser();
this.router.navigateByUrl(`/login`);
return Observable.of(err.message);
}
// handle your auth error or rethrow
return Observable.throw(err);
}
}
しかし、次のエラーが表示されます。 Cookieを削除しないか、ログインページに移動しないなど、実際には何も起こりません。ヘルプや提案をいただければ幸いです。
インターセプターを使用して、次のように処理する必要があります。
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private router: Router) { }
private handleAuthError(err: HttpErrorResponse): Observable<any> {
//handle your auth error or rethrow
if (err.status === 401 || err.status === 403) {
//navigate /delete cookies or whatever
this.router.navigateByUrl(`/login`);
// if you've caught / handled the error, you don't want to rethrow it unless you also want downstream consumers to have to handle it as well.
return Observable.of(err.message);
}
return Observable.throw(err);
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// Clone the request to add the new header.
const authReq = req.clone({headers: req.headers.set(Cookie.tokenKey, Cookie.getToken())});
// catch the error, make specific functions for catching specific errors and you can chain through them with more catch operators
return next.handle(authReq).catch(x=> this.handleAuthError(x)); //here use an arrow function, otherwise you may get "Cannot read property 'navigate' of undefined" on angular 4.4.2/net core 2/webpack 2.70
}
}
hTTPサービスラッパーは必要ありません。
ルーターを使用するには、次のようなファクトリープロバイダーが必要です。
providers: [
{
provide: HTTP_INTERCEPTORS,
useFactory: function(router: Router) {
return new AuthInterceptor(router);
},
multi: true,
deps: [Router]
},
.... other providers ...
]
インターセプター(おそらくapp.module)を提供する場所。矢印関数を使用しないでください。 prod用にビルドしようとすると、ファクトリ関数ではサポートされません。
ワーキングプランク: https://plnkr.co/edit/UxOEqhEHX1tCDVPDy488?p=preview
@ bryan60の提案から、私は彼のソリューションにほとんど変更を加えませんでした
App.module.ts内:
providers: [
{
provide: HTTP_INTERCEPTORS,
useFactory: function(injector: Injector) {
return new AuthInterceptor(injector);
},
multi: true,
deps: [Injector]
},
.... other providers ...
]
およびauth-interceptor.service.tsで:
import {Injectable, Injector} from '@angular/core';
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {Cookie} from './cookie.service';
import {Router} from '@angular/router';
import {UserService} from './user.service';
import {ToasterService} from '../toaster/toaster.service';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private injector: Injector) {}
private handleError(err: HttpErrorResponse): Observable<any> {
let errorMsg;
if (err.error instanceof Error) {
// A client-side or network error occurred. Handle it accordingly.
errorMsg = `An error occurred: ${err.error.message}`;
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
errorMsg = `Backend returned code ${err.status}, body was: ${err.error}`;
}
if (err.status === 404 || err.status === 403) {
this.injector.get(UserService).purgeAuth();
this.injector.get(ToasterService).showError(`Unauthorized`, errorMsg);
this.injector.get(Router).navigateByUrl(`/login`);
}
console.error(errorMsg);
return Observable.throw(errorMsg);
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// Clone the request to add the new header.
const authReq = req.clone({headers: req.headers.set(Cookie.tokenKey, Cookie.getToken())});
// Pass on the cloned request instead of the original request.
return next.handle(authReq).catch(err => this.handleError(err));
}
}
ビルドでAOTを使用している場合は、以下を試してください。
export function authInterceptorFactory(injector: Injector) {
return new AuthInterceptor(injector);
}
providers: [
{
provide: HTTP_INTERCEPTORS,
useFactory: authInterceptorFactory,
multi: true,
deps: [Injector]
},
.... other providers ...
]
上記の@ bryan60の答えはうまくいきます、私のような問題に直面している人が下の行のエラーをキャッチした場合
return next.handle(authReq).catch(x=> this.handleAuthError(x));
do()を使用してエラーを処理します(catch()で問題が発生した場合)
import 'rxjs/add/operator/do';
return next.handle(authReq)
.do(
success => {/*todo*/},
err => {this.handleAuthError(authReq)}
);
}
handleAuthError(err: any) {
if(err.status === 401 || err.status === 403) {
this.storageService.clear();
window.location.href = '/home';
}
}
これが誰かの助けになることを願っています。