Angular HttpStatus为202时使用拦截器重定向和取消请求

我正在用Angular 10做一个web应用程序

在我的身份验证流程中，如果您登录后后端发送HttpStatus 202，则意味着您需要输入一个pincode，我需要将您重定向到另一个组件。我曾尝试使用拦截器执行此操作，但遇到以下问题：

重定向没有发生

我找不到取消请求的方法，换句话说，让请求的所有者（LoginComponent）知道它不需要做任何事情，因为发生了其他事情

拦截器

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(
    private router: Router
  ) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      filter(event => event instanceof HttpResponse),
      map((event: HttpResponse<any>) => {
        if (event.status === 202) {
          this.router.navigateByUrl('/validation-code');
        }
        return event;
      }));
  }

}

授权服务

login(username: string, password: string): Observable<IUser> {
    const payload = {
      Username: username,
      Password: password,
    };

    return this.post<IUser>({
      url: '/login',
      body: payload
    })
      .pipe(
        tap(user => this.localStorageService.set('user', user)),
      );
  }

login（用户名：string，密码：string）：可观察{
常数有效载荷={
用户名：用户名，
密码：密码，
};
把这个寄回来({
url:“/login”，
车身：有效载荷
})
.烟斗(
点击（user=>this.localStorageService.set（'user'，user）），
);
}

我尝试过这样修改拦截器：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      filter(event => event instanceof HttpResponse),
      map((event: HttpResponse<any>) => {
        if (event.status === 202) {
          this.router.navigateByUrl('/auth/validation-code');

          // I have tried these...
          // return of(undefined);
          // return EMPTY;
          // return NEVER;
        }
        return event;
      }));

  }

intercept（请求：HttpRequest，下一步：HttpHandler）：可观察{
返回next.handle（request.pipe）(
过滤器（事件=>HttpResponse的事件实例），
映射（（事件：HttpResponse）=>{
如果（event.status==202）{
this.router.navigateByUrl（'/auth/validation code'）；
//我试过这些。。。
//返回（未定义）；
//返回空；
//永不回头；
}
返回事件；
}));
}

TS2322:类型“可观察”为 不可分配给“可观察”类型。类型 “HttpResponse | Observable”不可分配给类型 “HttpEvent”。类型“Observable”不可分配给 键入“HttpEvent”。类型中缺少属性“type” “可观察”，但在类型“HttpUserEvent”中是必需的

---

我的目标是使用拦截器处理我的身份验证场景，并在我收到HttpStatus 202时将用户重定向到组件。

您需要抛出一个错误以停止可观察的流。试试这个：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      filter(event => event instanceof HttpResponse),
      map((event: HttpResponse<any>) => {
        if (event.status === 202) {
          this.router.navigateByUrl('/auth/validation-code');
          throw new Error('Pin code required');
        }
        return event;
      }),
      catchError(err => {
        return of(err);
      })
    );
  }

intercept（请求：HttpRequest，下一步：HttpHandler）：可观察{
返回next.handle（request.pipe）(
过滤器（事件=>HttpResponse的事件实例），
映射（（事件：HttpResponse）=>{
如果（event.status==202）{
this.router.navigateByUrl（'/auth/validation code'）；
抛出新错误（“需要Pin码”）；
}
返回事件；
}),
catchError（err=>{
返回（err）；
})
);
}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      filter(event => event instanceof HttpResponse),
      map((event: HttpResponse<any>) => {
        if (event.status === 202) {
          this.router.navigateByUrl('/auth/validation-code');
          throw new Error('Pin code required');
        }
        return event;
      }),
      catchError(err => {
        return of(err);
      })
    );
  }