angular HTTP拦截器阻止请求继续进行并中断请求链

在Angular的HTTP拦截器中,如果你希望在特定条件下阻止请求继续进行并中断请求链,直接返回 false 实际上不会达到预期效果。Angular的HTTP拦截器期望拦截器方法 intercept 返回一个 Observable<HttpEvent<any>>。如果你想要中断请求,应该抛出一个错误或者返回一个错误的 Observable

例如,如果你在拦截器中判断到请求不符合要求,可以通过抛出错误或返回一个带有错误信息的 Observable 来中断请求

复制代码
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class MyInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 假设我们有一些条件判断
    if (/* 不符合要求的条件 */) {
      // 抛出错误,中断请求
      return throwError(new HttpErrorResponse({ status: 403, statusText: 'Forbidden by Interceptor' }));
    }

    // 如果条件符合,继续处理请求
    return next.handle(request).pipe(
      catchError(error => {
        // 可以在这里处理错误,决定是否重新抛出或转换错误
        return throwError(error);
      })
    );
  }
}

在这个例子中,如果请求不符合你的要求,拦截器会抛出一个 HttpErrorResponse,模拟一个HTTP错误响应,从而中断请求流程。这会使得请求不会到达服务器,而且错误可以通过订阅的错误处理逻辑来捕获。

相关推荐
Larcher32 分钟前
新手也能学会,100行代码玩AI LOGO
前端·llm·html
徐子颐44 分钟前
从 Vibe Coding 到 Agent Coding:Cursor 2.0 开启下一代 AI 开发范式
前端
小月鸭1 小时前
如何理解HTML语义化
前端·html
jump6801 小时前
url输入到网页展示会发生什么?
前端
诸葛韩信1 小时前
我们需要了解的Web Workers
前端
brzhang1 小时前
我觉得可以试试 TOON —— 一个为 LLM 而生的极致压缩数据格式
前端·后端·架构
huangdengji2 小时前
基于openresty反向代理、dns劫持、实现对http请求、响应内容抓包
网络协议·http·openresty
yivifu2 小时前
JavaScript Selection API详解
java·前端·javascript
这儿有一堆花2 小时前
告别 Class 组件:拥抱 React Hooks 带来的函数式新范式
前端·javascript·react.js
十二春秋2 小时前
场景模拟:基础路由配置
前端