HttpService
delete<T>(url: string): Observable<T> {
return this.httpClient.delete<T>(`${url}`);
}
SettingsService
deleteTeamMember(companyId: number, userId: number): Observable<void> {
return this.httpService.delete<void>(
`${environment.urls.api}/company/${companyId}/team/${userId}`
);
}
component.ts
this.settingsService
.deleteTeamMember(this.company.companyId, teamMember.userId)
.subscribe(); //api call
The API request above is encountering a 400 Bad Request error. It includes access tokens and other necessary credentials.
API response
{
"code": "BadRequest",
"title": "Bad Request",
"message": "Expected one of: <<{,[>> but got: <<EOF>>",
"type": "tag:oracle.com,2020:error/BadRequest",
"instance": "tag:oracle.com,2020:ecid/XgKKiZB497hJdOcC1jQxOQ"
}
Strangely, the same API request and access token function properly in Postman. Any insights on why?
AuthInterceptor
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
private isRefreshing = false;
private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(
null
);
constructor(
private authService: AuthService,
private userDataService: UserDataService
) {}
intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
let authRequest = request;
const accessToken = this.userDataService.getAccessToken();
if (accessToken != null) {
authRequest = this.addTokenHeader(request, accessToken);
}
return next.handle(authRequest).pipe(
catchError((error) => {
if (
error instanceof HttpErrorResponse &&
!authRequest.url.includes('auth/sign-in') &&
error.status === 401
) {
return this.handle401Error(authRequest, next);
}
return throwError(error);
})
);
}
private handle401Error(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
if (!this.isRefreshing) {
this.isRefreshing = true;
this.refreshTokenSubject.next(null);
const refreshToken = this.userDataService.getRefreshToken();
if (refreshToken) {
return this.authService.refreshToken(refreshToken).pipe(
switchMap((token: TokenModel) => {
this.isRefreshing = false;
this.userDataService.setAccessToken(token?.accessToken);
this.userDataService.setRefreshToken(token?.refreshToken);
this.refreshTokenSubject.next(token.accessToken); //get the 'accessToken' from refreshToken() call
return next.handle(this.addTokenHeader(request, token.accessToken));
}),
catchError((err) => {
this.isRefreshing = false;
this.userDataService.setIsSignedOut(true); //Sign Out the app
return throwError(err);
})
);
}
}
return this.refreshTokenSubject.pipe(
filter((accessToken) => accessToken !== null),
take(1),
switchMap((accessToken) =>
next.handle(this.addTokenHeader(request, accessToken))
)
);
}
private addTokenHeader(
request: HttpRequest<any>,
accessToken: string
): HttpRequest<any> {
return request.clone({
setHeaders: {
'Content-Type': 'application/json',
'Access-Token': accessToken,
},
});
}
}