Wie fängt Angular Anfragen ab und kapselt sie?

Im vorherigen Artikel haben wir uns mit der Verwendung des API-Proxys in Angular mit dem Problem der lokalen gemeinsamen Debugging-Schnittstelle und des verwendeten Proxys beschäftigt.

Unsere Schnittstellen werden separat geschrieben und verarbeitet. In tatsächlichen Entwicklungsprojekten gibt es viele Schnittstellen, von denen einige Anmeldeinformationen erfordern, andere nicht. Können wir in Betracht ziehen, die Anfrage abzufangen und zu kapseln, wenn jede Schnittstelle nicht ordnungsgemäß verarbeitet wird? [Empfohlene verwandte Tutorials: „Angular Tutorial“]

Dieser Artikel wird implementiert.

Um zwischen Umgebungen zu unterscheiden

, müssen wir Dienste in verschiedenen Umgebungen abfangen.

Umgebungen

angular-cli Verzeichnis app/enviroments automatisch unterschieden

                                          
├── Environment.prod.ts // In der Produktionsumgebung verwendete Konfiguration └── Environment.ts // In der Entwicklungsumgebung verwendete Konfiguration

Ändern wir die Entwicklungsumgebung:

// enviroment.ts

const-Umgebung exportieren = {
  baseUrl: '',
  Produktion: falsch
};

baseUrl ist ein Feld, das vor der Anfrage hinzugefügt wird, wenn Sie die Anfrage stellen. Es verweist auf die Adresse, die Sie anfordern möchten. Ich habe nichts hinzugefügt. Tatsächlich war es gleichbedeutend mit dem Hinzufügen des Inhalts von http://localhost:4200 .

Natürlich muss der Inhalt, den Sie hier hinzufügen, an den auf Ihrem Proxy hinzugefügten Inhalt angepasst werden.

Wir hoffen http-interceptor.service.ts dass jeder

einen Interceptor hinzufügt

Die Anfrage wird diesen Dienst durchlaufen.

// http-interceptor.service.ts

import { Injectable } from '@angular/core';
importieren {
  HttpEvent,
  HttpHandler,
  HttpInterceptor, // Interceptor HttpRequest, // Request} from '@angular/common/http';

import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

{ Umgebung } aus 'src/environments/environment' importieren;

@Injectable({
  bereitgestelltIn: 'root'
})
Die Exportklasse HttpInterceptorService implementiert HttpInterceptor {

  Konstruktor() { }

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

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

    return next.handle(secureReq).pipe(
      klopfen(
        (Antwort: beliebig) => {
          // Antwortdaten verarbeiten console.log(response)
        },
        (Fehler: beliebig) => {
          // Fehlerdaten behandeln console.log(error)
        }
      )
    )
  }
}

Damit der Interceptor wirksam wird, müssen wir ihn in app.module.ts einfügen:

// app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
//Interceptor-Dienst import { HttpInterceptorService } from './services/http-interceptor.service';

Anbieter: [
  // Abhängigkeitsinjektion {
    bereitstellen: HTTP_INTERCEPTORS,
    useClass: HttpInterceptorService,
    multi: wahr,
  }
],

Überprüfung

zu diesem Zeitpunkt, wir haben den Interceptor erfolgreich implementiert. Wenn Sie npm run dev ausführen, wird auf der Konsole die folgende Meldung angezeigt:

Um zu überprüfen, ob für den Zugriff auf den Inhalt Inhaltsanmeldeinformationen erforderlich sind, habe ich hier die Schnittstelle [post] https://jimmyarea.com/api/private/leave/message verwendet und die folgende Fehlermeldung erhalten:

Das Backend hat bereits verarbeitet, dass für den Betrieb dieser Schnittstelle Anmeldeinformationen erforderlich sind, sodass direkt ein Fehler 401 gemeldet wird.

Hier kommt also das Problem. Wie müssen wir nach der Anmeldung unsere Zugangsdaten mitbringen?

Wie folgt ändern wir den Interceptor-Inhalt:

let secureReq: HttpRequest<any> = req;
// ...
// Localhost verwenden, um Benutzeranmeldeinformationen im Anforderungsheader zu speichern if (window.localStorage.getItem('ut')) {
  let token = window.localStorage.getItem('ut') || ''.
  secureReq = secureReq.clone({
    Header: req.headers.set('token', token)
  });
}

// ...

Die Gültigkeitsdauer dieses Zertifikats erfordert, dass Leser beim Betreten des Systems beurteilen, ob die Gültigkeitsdauer gültig ist, und dann den Wert von localstorage zurücksetzen. Andernfalls werden immer Fehler gemeldet. Das ist auch sehr einfach Die Kapselung des localstorage ist praktisch für den Betrieb. Ja ~

[Ende]