How can I redirect to login page on 401 response in Angular 5?
Here is for Angular 11
import {
HttpErrorResponse,
HttpEvent,
HttpHandler,
HttpInterceptor,
HttpRequest,
} from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable, throwError } from "rxjs";
import { catchError, map } from "rxjs/operators";
import HttpStatusCode from "src/app/models/enums/HttpStatusCode";
import { AuthenticationService } from "./authentication.service";
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService) {}
intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return next.handle(request).pipe(
map((event: HttpEvent<any>) => {
return event;
}),
catchError(
(
httpErrorResponse: HttpErrorResponse,
_: Observable<HttpEvent<any>>
) => {
if (httpErrorResponse.status === HttpStatusCode.UNAUTHORIZED) {
this.authenticationService.redirectToLogin();
}
return throwError(httpErrorResponse);
}
)
);
}
}
The following method declared in AuthenticationService
public redirectToLogin(path: string, queryParams: any) {
this.router.navigate([path], {
queryParams,
queryParamsHandling: "merge",
});
}
I resolved my problem changing my interceptor like following:
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
constructor() {
}
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let accessToken = sessionStorage.getItem("access_token");
if(accessToken)
{
request = request.clone({
setHeaders: {
Authorization: `Bearer ${accessToken}`
}
});
}
return next.handle(request).do((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
}
}, (err: any) => {
if (err instanceof HttpErrorResponse) {
if (err.status === 401) {
this.router.navigate(['login']);
}
}
});
}
}
I found the solution there: https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8
Only to support new readers, notice that in angular 7 you should use pipe() instead of do() or catch():
return next.handle(request).pipe(catchError(err => {
if (err.status === 401) {
MyComponent.logout();
}
const error = err.error.message || err.statusText;
return throwError(error);
}));