ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

Angular はリクエストをどのようにインターセプトしてカプセル化しますか?

著者：Eve Cole 更新時間：2022-08-25 13:23:29
Angular はリクエストをどのようにインターセプトしてカプセル化しますか?次の記事では、Angular でリクエスト インターセプトを実装する方法を紹介します。お役に立てば幸いです。

前回の記事では、Angular で API プロキシを使用して、ローカル ジョイント デバッグ インターフェイスの問題とプロキシの使用について説明しました。

実際の開発プロジェクトでは、インターフェイスは個別に記述され、処理されます。ログイン認証情報を必要とするインターフェイスと、ログイン認証情報を必要としないインターフェイスがあります。各インターフェイスが適切に処理されない場合、リクエストをインターセプトしてカプセル化することを検討できますか? 【おすすめ関連チュートリアル：「Angularチュートリアル」】

この記事を実装します。

環境を区別するには

、異なる環境でサービスをインターセプトする必要があります。 angular-cli使用してプロジェクトを生成すると、 app/enviromentsディレクトリ内の環境が自動的に区別されます

。                                          
§──environment.prod.ts //本番環境で使用する設定 └──environment.ts //開発環境で使用する設定

開発環境を変更してみましょう:

//enviroment.ts

エクスポート const 環境 = {
  ベースURL: ''、
  生産: 偽
BaseUrl は
、

baseUrlを行うときにリクエストの前に追加されるフィールドで、リクエストするアドレスを指します。実際、これはhttp://localhost:4200のコンテンツを追加するのと同じです。

もちろん、ここで追加するコンテンツは、プロキシに追加するコンテンツと一致するように調整する必要があります。

インターセプターは、

読者が自分で考えて検証できるようにする必要

http-interceptor.service.tsあります

。

リクエストはこのサービスを経由します。

// http-interceptor.service.ts

import { Injectable } from '@angular/core';
輸入 {
  HTTPイベント、
  HTTPハンドラー、
  HttpInterceptor, // インターセプター HttpRequest, // Request} from '@angular/common/http';

import { Observable } from 'rxjs';
import { タップ } から 'rxjs/operators';

import { 環境 } から 'src/environments/environment';

@Injectable({
  提供対象: 'ルート'
})
エクスポート クラス HttpInterceptorService は HttpInterceptor を実装します {

  コンストラクター() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let secureReq: HttpRequest<any> = req;

    secureReq = secureReq.clone({
      URL: 環境.baseUrl + req.url
    });

    return next.handle(secureReq).pipe(
      タップ(
        (応答: 任意) => {
          // レスポンスデータを処理 console.log(response)
        }、
        (エラー: 任意) => {
          // エラーデータを処理します console.log(error)
        }
      )
    )
  }

インターセプターを有効にするには、それをapp.module.tsに挿入する必要があります:

//
app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } から '@angular/common/http';
//インターセプター サービス import { HttpInterceptorService } from './services/http-interceptor.service';

プロバイダー: [
  // 依存性の注入 {
    提供: HTTP_INTERCEPTORS、
    useClass: HttpInterceptorService、
    マルチ: true、
  }
】,

現時点での

検証

、インターセプターの実装に成功しました。

npm run dev実行すると、コンソールに次のメッセージが表示されます。

1.png

コンテンツにアクセスするためにコンテンツ認証情報が必要かどうかを確認するために、ここでは[post] https://jimmyarea.com/api/private/leave/messageインターフェイスを使用して試行したところ、次のエラーが発生しました。

2.png

バックエンドは、このインターフェイスの動作に資格情報が必要であることをすでに処理しているため、エラー401が直接報告されます。

さて、ここで問題が起こります。ログインした後、資格情報をどのように持っていく必要がありますか?

次のように、インターセプタ
の

コンテンツを変更します。

// ...
// localhost を使用してリクエスト ヘッダーにユーザー資格情報を保存します if (window.localStorage.getItem('ut')) {
  let トークン = window.localStorage.getItem('ut') ||
  secureReq = secureReq.clone({
    ヘッダー: req.headers.set('トークン', トークン)
  });
}

// ...

この証明書の有効期間は、読者がシステムに入るときに有効かどうかを判断し、その後localstorageの値をリセットすることを検討する必要があります。そうしないと、常にエラーが報告されます。これも非常に簡単です。

ローカルストレージのカプセル化は

操作

localstorage便利です。
関連記事