Bagaimana cara Angular mencegat dan merangkum permintaan?

Pada artikel sebelumnya, menggunakan proxy Api di Angular, kami menangani masalah antarmuka debugging gabungan lokal dan menggunakan proxy.

Antarmuka kami ditulis dan diproses secara terpisah. Dalam proyek pengembangan sebenarnya, ada banyak antarmuka, beberapa di antaranya memerlukan kredensial login, dan beberapa di antaranya tidak. Jika setiap antarmuka tidak ditangani dengan benar, dapatkah kami mempertimbangkan untuk mencegat dan merangkum permintaan tersebut? [Tutorial terkait yang direkomendasikan: "Tutorial Sudut"]

Artikel ini akan diterapkan.

Untuk membedakan lingkungan

, kita perlu mencegat layanan di lingkungan yang berbeda. Saat menggunakan angular-cli untuk menghasilkan proyek, ia secara otomatis membedakan lingkungan. Di direktori app/enviroments :

lingkungan                                          
├── environment.prod.ts // Konfigurasi yang digunakan di lingkungan produksi └── environment.ts // Konfigurasi yang digunakan di lingkungan pengembangan

Mari kita ubah lingkungan pengembangan:

// enviroment.ts

ekspor lingkungan const = {
  baseUrl: '',
  produksi: salah
};

baseUrl adalah kolom yang ditambahkan di depan permintaan saat Anda membuat permintaan. Ini menunjuk ke alamat yang ingin Anda minta. Saya tidak menambahkan apa pun. Faktanya, itu setara dengan menambahkan konten http://localhost:4200 .

Tentu

saja, konten yang Anda tambahkan di sini harus disesuaikan agar sesuai dengan konten yang ditambahkan pada proxy Anda. Pembaca dapat berpikir dan memverifikasi sendiri.

http-interceptor.service.ts berharap setiap permintaan akan melalui layanan ini.

// http-interceptor.service.ts

import { Suntikan } dari '@angular/core';
impor {
  HttpAcara,
  HttpHandler,
  HttpInterceptor, // Interceptor HttpRequest, // Permintaan} dari '@angular/common/http';

impor {Dapat Diamati } dari 'rxjs';
impor { ketuk } dari 'rxjs/operator';

impor { lingkungan } dari 'src/lingkungan/lingkungan';

@Dapat disuntik({
  disediakan di: 'root'
})
kelas ekspor HttpInterceptorService mengimplementasikan HttpInterceptor {

  konstruktor() {} }

  intersepsi(persyaratan: HttpRequest<any>, selanjutnya: HttpHandler): Dapat Diamati<HttpEvent<any>> {
    biarkan secureReq: HttpRequest<any> = req;

    secureReq = secureReq.clone({
      url: lingkungan.baseUrl + req.url
    });

    kembali berikutnya.pegangan(secureReq).pipe(
      mengetuk(
        (tanggapan: apa saja) => {
          // Memproses data respon console.log(response)
        },
        (kesalahan: apa saja) => {
          // Menangani data error console.log(error)
        }
      )
    )
  }
}

Agar interseptor dapat diterapkan, kita harus menyuntikkannya ke app.module.ts :

// app.module.ts

impor { HttpClientModule, HTTP_INTERCEPTORS } dari '@angular/common/http';
//impor layanan pencegat { HttpInterceptorService } dari './services/http-interceptor.service';

penyedia: [
  // injeksi ketergantungan {
    berikan: HTTP_INTERCEPTORS,
    useClass: HttpInterceptorService,
    multi: benar,
  }
],

Verifikasi

pada titik ini, kami telah berhasil mengimplementasikan pencegat. Jika Anda menjalankan npm run dev , Anda akan melihat pesan berikut di konsol:

Untuk memverifikasi apakah kredensial konten diperlukan untuk mengakses konten, di sini saya menggunakan antarmuka [post] https://jimmyarea.com/api/private/leave/message untuk mencoba dan mendapatkan kesalahan berikut:

Backend telah memproses bahwa antarmuka ini memerlukan kredensial untuk beroperasi, sehingga kesalahan 401 dilaporkan secara langsung.

Jadi, inilah masalahnya. Setelah kita login, bagaimana kita perlu membawa kredensial kita?

Sebagai berikut, kami memodifikasi konten interseptor:

let secureReq: HttpRequest<any> = req;
// ...
// Gunakan localhost untuk menyimpan kredensial pengguna di header permintaan if (window.localStorage.getItem('ut')) {
  biarkan token = window.localStorage.getItem('ut') ||.
  secureReq = secureReq.clone({
    header: req.headers.set('token', token)
  });
}

// ...

Masa berlaku sertifikat ini mengharuskan pembaca untuk menilai apakah masa berlakunya valid saat memasuki sistem, dan kemudian mempertimbangkan untuk mengatur ulang nilai localstorage , jika tidak, kesalahan akan selalu dilaporkan. Ini juga sangat sederhana enkapsulasi localstorage mudah dioperasikan. Ya~

[Akhir]