I am facing an issue with 2 mat-select elements in my component, both of which utilize the async pipe:
<div class="flex-col">
<mat-label>Issue Desc
</mat-label>
<mat-form-field>
<mat-select [(value)]="model.issue_Desc"
[(ngModel)]="model.issue_Desc"
name="issue_Desc" required>
<mat-option *ngFor="let issues of (this.IssueObs$ | async)"
[value]="issues.issueDesc">
{{issues.issueDesc}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="flex-col">
<mat-label>Area Desc</mat-label>
<mat-form-field>
<mat-select [(value)]="model.area_Desc"
[(ngModel)]="model.area_Desc"
name="area_Desc" required>
<mat-option *ngFor="let area of (this.AreaObs$ | async )"
[value]="area.areaDesc">
{{area.areaDesc}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
Upon encountering a JWT token expiration on my website, the component triggers two instances of 401 Unauthorized errors. This results in difficulty for me as I face duplicate messages when redirecting the user to the login screen along with a "Session Ended" toaster message due to handling within my interceptor.
Below is my interceptor code snippet:
intercept(request: HttpRequest<unknown>, next: HttpHandler):
Observable<HttpEvent<unknown>> {
return next.handle(request).pipe(
timeout(10000),
catchError(error => {
if (error) {
switch (error.status) {
case 401:
if (error.error == null) {
//This section executes upon token expiry
this.toastr.info("Session has ended!")
//<<---- Executed twice
this.accountService.logout();
}
else {
this.toastr.error(error.error)
}
this.dialogRef.closeAll();
this.router.navigateByUrl('')
break;
}
}
return throwError(error);
})
);
}
https://i.sstatic.net/tGnUd.png
https://i.sstatic.net/1gudI.png
I need guidance on how to handle these errors efficiently to display only one message even in the presence of multiple errors originating from the async pipe? Any assistance would be highly appreciated. Thank you in advance.