企业官网建设流程全解析

做化验的网站,产品推广方案范文500字,图片生成器网站,网站维护员工作内容在 Angular 应用开发中#xff0c;HTTP 请求是与后端交互的核心环节。实际项目中#xff0c;我们常常需要为所有请求统一添加认证 Token、统一处理响应错误#xff08;如 401 未授权、500 服务器错误#xff09;#xff0c;如果每个请求都单独处理这些逻辑#xff0c;不仅…在 Angular 应用开发中HTTP 请求是与后端交互的核心环节。实际项目中我们常常需要为所有请求统一添加认证 Token、统一处理响应错误如 401 未授权、500 服务器错误如果每个请求都单独处理这些逻辑不仅代码冗余还容易出现遗漏。Angular 的 HTTP 拦截器HTTP Interceptor正是为解决这类问题而生的最佳方案。本文将手把手教你实现一个实用的 HTTP 拦截器完成两大核心功能为所有 HTTP 请求自动添加 Token 请求头统一捕获和处理 HTTP 响应异常一、HTTP 拦截器核心概念HTTP 拦截器是 Angular 提供的一种中间件机制能够拦截应用发出的所有 HTTP 请求和响应允许我们在请求发送前、响应返回后或出错时插入自定义逻辑。拦截器基于HttpInterceptor接口实现核心是intercept方法该方法接收两个参数req: HttpRequestany待处理的请求对象不可直接修改需克隆后修改next: HttpHandler请求处理链路的下一个处理器二、实现步骤1. 环境准备确保你的 Angular 项目已正确配置建议使用 Angular 12 版本本文示例基于 Angular 16。2. 创建拦截器服务首先创建一个拦截器文件http.interceptor.ts放在core/interceptors目录下符合 Angular 最佳实践import { Injectable } from angular/core; import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from angular/common/http; import { Observable, throwError, catchError } from rxjs; import { Router } from angular/router; import { ToastService } from ../services/toast.service; // 自定义提示服务可替换为你的提示组件 Injectable() export class HttpTokenInterceptor implements HttpInterceptor { constructor( private router: Router, private toastService: ToastService // 用于全局提示错误信息 ) {} intercept(request: HttpRequestunknown, next: HttpHandler): ObservableHttpEventunknown { // 1. 请求拦截统一添加Token请求头 const modifiedReq this.addTokenToRequest(request); // 2. 响应拦截统一处理响应和错误 return next.handle(modifiedReq).pipe( catchError((error: HttpErrorResponse) this.handleResponseError(error)) ); } /** * 为请求添加Token请求头 * param request 原始请求对象 * returns 克隆后的新请求对象 */ private addTokenToRequest(request: HttpRequestunknown): HttpRequestunknown { // 从本地存储获取Token实际项目中建议封装到AuthService const token localStorage.getItem(auth_token); // 如果有Token则克隆请求并添加Authorization头 if (token) { return request.clone({ setHeaders: { Authorization: Bearer ${token}, // JWT标准格式 Content-Type: application/json // 统一设置Content-Type } }); } // 无Token则返回原始请求 return request; } /** * 统一处理响应错误 * param error HTTP错误响应 * returns 抛出错误供订阅者处理 */ private handleResponseError(error: HttpErrorResponse): Observablenever { let errorMessage 未知错误请稍后重试; // 根据错误类型分类处理 if (error.error instanceof ErrorEvent) { // 客户端错误如网络异常 errorMessage 客户端错误${error.error.message}; } else { // 服务端错误根据状态码处理 switch (error.status) { case 401: // 未授权清除Token并跳转到登录页 localStorage.removeItem(auth_token); this.toastService.error(登录已过期请重新登录); this.router.navigate([/login]); errorMessage 登录已过期请重新登录; break; case 403: errorMessage 无权限访问该资源; break; case 404: errorMessage 请求的资源不存在; break; case 500: errorMessage 服务器内部错误请联系管理员; break; default: errorMessage 服务端错误 [${error.status}]${error.message}; } } // 全局提示错误信息 this.toastService.error(errorMessage); // 抛出错误让请求的订阅者也能捕获 return throwError(() new Error(errorMessage)); } }3. 注册拦截器创建完拦截器后需要在 Angular 的根模块app.module.ts中注册使其生效import { NgModule } from angular/core; import { BrowserModule } from angular/platform-browser; import { HTTP_INTERCEPTORS } from angular/common/http; import { AppRoutingModule } from ./app-routing.module; import { AppComponent } from ./app.component; import { HttpTokenInterceptor } from ./core/interceptors/http.interceptor; import { ToastService } from ./core/services/toast.service; // 引入提示服务 NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [ ToastService, // 注册HTTP拦截器 { provide: HTTP_INTERCEPTORS, useClass: HttpTokenInterceptor, multi: true // 允许多个拦截器重要 } ], bootstrap: [AppComponent] }) export class AppModule { }4. 补充说明自定义提示服务ToastService上述代码中用到了ToastService这是一个自定义的全局提示服务你可以根据项目实际情况替换为 NG-ZORRO、PrimeNG 等 UI 库的提示组件或实现一个简易版// core/services/toast.service.ts import { Injectable } from angular/core; import { ToastrService } from ngx-toastr; // 以ngx-toastr为例 Injectable({ providedIn: root }) export class ToastService { constructor(private toastr: ToastrService) {} // 错误提示 error(message: string): void { this.toastr.error(message, 错误); } // 成功提示可选 success(message: string): void { this.toastr.success(message, 成功); } }三、高级扩展技巧1. 排除特定请求某些请求如登录、注册不需要添加 Token可在拦截器中排除private addTokenToRequest(request: HttpRequestunknown): HttpRequestunknown { // 排除登录接口 const excludedUrls [/api/auth/login, /api/auth/register]; if (excludedUrls.some(url request.url.includes(url))) { return request; } const token localStorage.getItem(auth_token); if (token) { return request.clone({ setHeaders: { Authorization: Bearer ${token} } }); } return request; }2. 多个拦截器的执行顺序当注册多个拦截器时providers数组中的顺序即为拦截器的执行顺序请求阶段按数组顺序执行响应阶段按数组逆序执行例如providers: [ { provide: HTTP_INTERCEPTORS, useClass: InterceptorA, multi: true }, // 先执行 { provide: HTTP_INTERCEPTORS, useClass: InterceptorB, multi: true } // 后执行 ]请求时A → B → 发送请求响应时B → A → 组件四、注意事项请求对象不可变HttpRequest是不可变对象必须通过clone()方法修改后再返回。避免无限循环拦截器中如果发起新的 HTTP 请求务必排除该请求否则会导致无限拦截。Token 安全存储示例中使用localStorage存储 Token生产环境建议结合HttpOnly Cookie或加密存储。错误处理粒度全局拦截器处理通用错误特定请求的个性化错误仍需在订阅处单独处理。总结Angular HTTP 拦截器通过实现HttpInterceptor接口可统一拦截请求和响应避免重复代码。请求拦截核心是克隆HttpRequest并添加 Token 头响应拦截通过catchError统一处理不同状态码的错误。拦截器需在根模块注册multi: true允许注册多个拦截器执行顺序需根据业务需求合理设置。通过本文的实现方案你可以快速为 Angular 项目搭建起规范的 HTTP 请求处理体系提升代码可维护性和用户体验。