【Angular】provideHttpClientで実現する安全で効率的なHTTP通信

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

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

import { HttpResponse, provideHttpClient, withInterceptors } from '@angular/common/http';
import { HttpInterceptorFn } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';
import { tap } from 'rxjs';


// 認証トークンを追加するインターセプター
const authInterceptor: HttpInterceptorFn = (req, next) => {
  // ローカルストレージから認証トークンを取得
  const token = localStorage.getItem('auth_token');

  // トークンが存在する場合、リクエストヘッダーに追加
  if (token) {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${token}`)
    });
    return next(authReq);
  }
  return next(req);
};

// ログを記録するインターセプター
const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log(`🌐 送信リクエスト: ${req.method} ${req.url}`);

  return next(req).pipe(
    tap(response => {
      if (response instanceof HttpResponse) {
        console.log(`✅ 受信レスポンス: ${response.status} ${req.url}`);
      }
    })
  );
};

// アプリケーション設定
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([authInterceptor, loggingInterceptor])
    )
  ]
};

// ルートレベルの設定(app.config.ts)
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withRequestsMadeViaParent(),
      withInterceptors([baseUrlInterceptor])
    )
  ]
};

// 子モジュールの設定(feature.config.ts)
export const featureConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withRequestsMadeViaParent(),
      withInterceptors([featureSpecificInterceptor])
    )
  ]
};

// 共通のベースURL設定(親レベル)
const baseUrlInterceptor: HttpInterceptorFn = (req, next) => {
  const apiUrl = 'https://api.example.com';
  const apiReq = req.clone({
    url: `${apiUrl}${req.url}`
  });
  return next(apiReq);
};

// 特定機能用の設定(子レベル)
const featureSpecificInterceptor: HttpInterceptorFn = (req, next) => {
  // 特定の機能に関連するヘッダーを追加
  const customReq = req.clone({
    headers: req.headers.set('X-Feature-Version', '1.0')
  });
  return next(customReq);
};

import { provideHttpClient, withXsrfConfiguration } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withXsrfConfiguration({
        cookieName: 'XSRF-TOKEN',
        headerName: 'X-XSRF-TOKEN'
      })
    )
  ]
};

// バックエンド側でトークンを生成しクッキーに保存
app.get('/api', (req, res) => {
  res.cookie('XSRF-TOKEN', generateToken());
  res.send('OK');
});

// Angularが自動的にヘッダーにトークンを追加
this.http.post('/api/data', payload).subscribe(
  response => console.log('✅ 安全な通信が完了しました')
);

// バックエンド側でトークンを検証
app.post('/api/data', validateXsrfToken, (req, res) => {
  // トークンが有効な場合のみ処理を実行
});

const xsrfErrorInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    catchError(error => {
      if (error.status === 403) {
        console.error('🚫 XSRFトークンが無効です');
        // トークンの再取得などの対応
      }
      return throwError(() => error);
    })
  );
};

import { provideHttpClient, withJsonpSupport } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withJsonpSupport()
    )
  ]
};

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class WeatherService {
  constructor(private http: HttpClient) {}

  getWeatherData() {
    // JSONPリクエストの送信
    return this.http.jsonp(
      'https://api.weather.example.com/forecast',
      'callback'
    );
  }
}

getWeatherData() {
  return this.http.jsonp(
    'https://api.weather.example.com/forecast',
    'callback'
  ).pipe(
    timeout(5000),
    catchError(error => {
      if (error instanceof TimeoutError) {
        console.error('⏰ リクエストがタイムアウトしました');
      }
      return throwError(() => error);
    })
  );
}

getWeatherData() {
  return this.http.jsonp(
    'https://api.weather.example.com/forecast',
    'callback'
  ).pipe(
    catchError(error => {
      console.warn('⚠️ JSONPリクエストに失敗しました。代替手段を試行します');
      // 代替のAPIエンドポイントを使用
      return this.http.get('https://backup-api.example.com/weather');
    })
  );
}

import { provideHttpClient, withInterceptors, withXsrfConfiguration, withJsonpSupport } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(
      withInterceptors([authInterceptor, loggingInterceptor]),
      withXsrfConfiguration({
        cookieName: 'XSRF-TOKEN',
        headerName: 'X-XSRF-TOKEN'
      }),
      withJsonpSupport()
    )
  ]
};

import { HttpErrorResponse, HttpInterceptorFn } from '@angular/common/http';
import { catchError, throwError } from 'rxjs';

export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status === 0) {
        console.error('🔌 ネットワークエラーが発生しました');
      } else if (error.status === 401) {
        console.error('🔒 認証エラーが発生しました');
      } else if (error.status === 404) {
        console.error('❓ リソースが見つかりません');
      } else {
        console.error('⚠️ サーバーエラーが発生しました');
      }
      return throwError(() => error);
    })
  );
};