在Angular中,如果我们使用了拦截器来处理一些HTTP请求的逻辑,有时我们会遇到一个问题:当刷新token无效时,请求会被完全忽略,错误也不会被捕获或处理。
为了解决这个问题,我们可以使用RxJS的catchError操作符来处理拦截器中的错误。我们可以通过创建一个可以让我们处理发生错误时的函数来做到这一点。例如:
import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators';
@Injectable() export class AuthInterceptor implements HttpInterceptor { constructor(private authService: AuthService) {}
intercept(request: HttpRequest
return next.handle(request).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 401 && error.error?.code === 'invalid_token') {
// refreshToken 无效
this.authService.logout();
// 通过 throwError 抛出错误,以便进行统一处理
return throwError(error);
} else {
return throwError(error);
}
})
);
} }
在上面的拦截器中,我们首先检查token是否有效。如果无效,我们通过throwError操作符抛出错误。然后我们可以在应用程序级别通过一个统一的错误处理器来捕获这些错误。
请注意,在上面的代码示例中,我们还使用了catchError操作符。它会返回一个新的Observable,该Observable会发出一个错误,以便我们能够在统一处理器中进行错误处理。
通过这种方式,我们可以避免拦截器忽略Observable并处理刷新token无效的错误。