I have implemented a refresh token process in JwtInterceptor . When the accessToken has expired and return a 401 error, the Interceptor does not run the refreshingToken() function
This is my JwtInterceptor
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpErrorResponse,
} from '@angular/common/http';
import { from, Observable, throwError } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';
import { AuthService } from '../auth/auth.service';
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
constructor(private authService: AuthService) {}
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
const currentUserJwt = localStorage.getItem('pmsUserJwt');
if (currentUserJwt) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${currentUserJwt}`,
},
});
}
return next.handle(request).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
return from(this.authService.tryRefreshingTokens(currentUserJwt)).pipe(
switchMap((success) => {
if (success) {
const newToken = localStorage.getItem('pmsUserJwt');
request = request.clone({
setHeaders: {
Authorization: `Bearer ${newToken}`,
},
});
return next.handle(request);
}
})
);
}
return throwError(error);
})
);
}
}
This is the refreshingToken() function in authService.service.ts
async tryRefreshingTokens(token: string): Promise {
const refreshTokens = localStorage.getItem(‘refreshToken’);
if (!token || !refreshTokens) {
console.log('Token or refresh token is missing.');
return false;
}
const credentials = JSON.stringify({ accessToken: token, refreshToken: refreshTokens });
try {
const refreshRes = await new Promise<any>((resolve, reject) => {
this.http
.post<any>(`${this.API_URL.GENERAL}/${this.accountUrl}/refresh-token`, credentials, {
headers: new HttpHeaders({
'Content-Type': 'application/json',
}),
})
.subscribe({
next: (res) => resolve(res),
error: (err) => {
console.error('Token refresh error:', err);
reject(err);
},
});
});
if (refreshRes && refreshRes.data) {
localStorage.setItem('pmsUserJwt', refreshRes.data.jwToken);
localStorage.setItem('refreshToken', refreshRes.data.refreshToken);
this.currentUserJwtSubject.next(refreshRes.data.jwToken);
const user = this.parseJwt(refreshRes.data.jwToken);
this.currentUserSubject.next(user);
console.log('Tokens refreshed successfully');
return true;
} else {
console.log('Refresh response is invalid.');
return false;
}
} catch (error) {
console.error('Exception during token refresh:', error);
return false;
}
}
New contributor
iamhuichuo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.