HttpClient 与安全

路线图「HTTP Client」：HttpClient 返回 RxJS Observable，配合 Interceptor 统一鉴权、日志、错误处理。对比 Next.js 核心 的服务端 fetch，Angular SPA 默认在浏览器发请求到 API 网关或 Spring Boot。

学习目标

• 配置 provideHttpClient() 并发起 GET/POST
• 用 pipe + catchError 处理错误与 loading 态
• 了解 Interceptor、XSRF 与 CORS 基础

核心概念

启用与请求

// app.config.ts
import { provideHttpClient, withInterceptors } from "@angular/common/http";

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(withInterceptors([authInterceptor]))],
};

loadTracks() {
  this.loading = true;
  this.trackService.list().pipe(
    catchError((err) => {
      this.error = err.message ?? "请求失败";
      return of([] as Track[]);
    }),
    finalize(() => (this.loading = false)),
  ).subscribe((tracks) => (this.tracks = tracks));
}

Interceptor

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem("token");
  if (token) {
    req = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
  }
  return next(req);
};

Angular 内置 XSRF 支持：Cookie + Header 双提交防 CSRF。开发环境 proxy.conf.json 转发 /api → localhost:8080。

与 React/Next 对照

	Angular	React	Next.js
客户端 HTTP	HttpClient (Observable)	fetch / axios	fetch in Client Component
拦截	Interceptor	封装 fetch	middleware / Route Handler
服务端请求	SSR HttpClient	—	Server Component fetch

练习

• 对接 mock /api/tracks，展示 loading / error / 列表三态
• Interceptor 为请求头加