Aktualisierungstoken in Angular

Die Aufrechterhaltung von Benutzersitzungen ohne ständige Anmeldungen ist der Schlüssel zu einem reibungslosen Web-Erlebnis. In diesem Blog zeige ich Ihnen, wie Sie einen Token-Refresh-Workflow in Angular implementieren, 401-Fehler behandeln und gleichzeitige Anfragen effektiv verwalten.

---

Was ist ein Aktualisierungstoken-Workflow?

In Authentifizierungssystemen haben Zugriffstoken eine kurze Lebensdauer, um Sicherheitsrisiken zu minimieren. Wenn ein Zugriffstoken abläuft, ermöglicht das Aktualisierungstoken der Anwendung, ein neues Zugriffstoken vom Server anzufordern, ohne dass sich der Benutzer erneut anmelden muss.

---

Angular-Implementierung

Wir werden einen Aktualisierungstoken-Mechanismus mithilfe von Angulars HttpInterceptor implementieren. Das Ziel besteht darin, nicht autorisierte Anfragen (401-Fehler) abzufangen und das Token zu aktualisieren, bevor die ursprüngliche Anfrage erneut versucht wird.

---

Kompletter Workflow

• Abfangen anfordern:
  Ein Abfangjäger erkennt eine nicht autorisierte 401-Antwort.

• Token-Aktualisierung:
  Wenn das Token abgelaufen ist, ruft „refreshToken“ ein neues Token ab.

• Wiederholungsanforderung:
  Die ursprüngliche Anfrage wird mit dem neuen Token wiederholt.

• Warteschlangenverwaltung:
  Ausstehende Anfragen werden verarbeitet, sobald das Token aktualisiert wird.

---

Codeübersicht

1. Token-Aktualisierungslogik Die Methode handleUnauthorized übernimmt die Aktualisierung des Tokens, wenn eine Anforderung aufgrund eines abgelaufenen Tokens fehlschlägt.

handleUnauthorized(
  req: HttpRequest<any>,
  next: HttpHandlerFn
): Observable<any> {
  if (!this.isRefreshingToken) {
    this.isRefreshingToken = true;

    // Notify all waiting requests that the token is being refreshed
    this.tokenSubject.next(null);

    return this.refreshToken().pipe(
      switchMap((newToken: string) => {
        if (newToken) {
          this.tokenSubject.next(newToken);
          // Retry the original request with the new token
          return next(this.addToken(req, newToken));
        }

        // If token refresh fails, log out the user
        this.logout();
        return throwError(() => 'Token expired');
      }),
      catchError((error) => {
        this.logout(); // Log out on error
        return throwError(() => error);
      }),
      finalize(() => {
        this.isRefreshingToken = false; // Reset the flag
      }),
    );
  } else {
    // Queue requests while a token is being refreshed
    return this.tokenSubject.pipe(
      filter((token) => token != null),
      take(1),
      switchMap((token) => next(this.addToken(req, token))),
    );
  }
}

Die handleUnauthorized-Funktion dient zur Verwaltung von Szenarien, in denen eine HTTP-Anfrage den Status „401 Unauthorized“ erhält, was darauf hinweist, dass das Zugriffstoken abgelaufen oder ungültig ist. Diese Funktion stellt sicher, dass die Anwendung das Token aktualisieren und die fehlgeschlagene Anfrage nahtlos wiederholen kann.

1. Verhindern Sie mehrere Aktualisierungsanfragen Die Funktion verwendet das isRefreshingToken-Flag, um sicherzustellen, dass jeweils nur eine Token-Aktualisierungsanforderung gestellt wird. Wenn das Token bereits aktualisiert wird, werden nachfolgende Anforderungen in die Warteschlange gestellt, bis das neue Token verfügbar ist.

handleUnauthorized(
  req: HttpRequest<any>,
  next: HttpHandlerFn
): Observable<any> {
  if (!this.isRefreshingToken) {
    this.isRefreshingToken = true;

    // Notify all waiting requests that the token is being refreshed
    this.tokenSubject.next(null);

    return this.refreshToken().pipe(
      switchMap((newToken: string) => {
        if (newToken) {
          this.tokenSubject.next(newToken);
          // Retry the original request with the new token
          return next(this.addToken(req, newToken));
        }

        // If token refresh fails, log out the user
        this.logout();
        return throwError(() => 'Token expired');
      }),
      catchError((error) => {
        this.logout(); // Log out on error
        return throwError(() => error);
      }),
      finalize(() => {
        this.isRefreshingToken = false; // Reset the flag
      }),
    );
  } else {
    // Queue requests while a token is being refreshed
    return this.tokenSubject.pipe(
      filter((token) => token != null),
      take(1),
      switchMap((token) => next(this.addToken(req, token))),
    );
  }
}

1. Aktualisieren Sie das Token Wenn keine Aktualisierungsanforderung ausgeführt wird, wird mithilfe der Methode „refreshToken“ eine Token-Aktualisierung initiiert. Sobald ein neues Token empfangen wurde:

• Es wird im tokenSubject gespeichert.
• Die ursprüngliche Anfrage wird mit dem aktualisierten Token wiederholt.

if (!this.isRefreshingToken) {
  this.isRefreshingToken = true;
  this.tokenSubject.next(null);

1. Gleichzeitige Anfragen bearbeiten Wenn bereits eine Token-Aktualisierung durchgeführt wird, stellt die Funktion nachfolgende Anforderungen in die Warteschlange. Diese Anfragen warten darauf, dass tokenSubject das neue Token ausgibt, bevor sie fortfahren.

return this.refreshToken(url).pipe(
  switchMap((newToken: string) => {
    if (newToken) {
      this.tokenSubject.next(newToken);
      return next(this.addToken(req, newToken));
    }
    this.logout();
    return throwError(() => 'Token expired');
  }),

1. Fehlerbehandlung Wenn die Token-Aktualisierung fehlschlägt oder eine Ausnahme auslöst:

• Der Benutzer ist abgemeldet.
• Ein Fehler wird an den Anrufer zurückgegeben.

return this.tokenSubject.pipe(
  filter((token) => token != null), // Wait for a non-null token
  take(1), // Only take the first emitted token
  switchMap((token) => next(this.addToken(req, token))),
);

1. Aufräumen Der Finalize-Operator stellt sicher, dass das isRefreshingToken-Flag zurückgesetzt wird, sodass nachfolgende Aktualisierungsanforderungen möglich sind.

catchError((error) => {
  this.logout();
  return throwError(() => error);
}),

---

Hinzufügen des Tokens zu Anfragen
Die addToken-Methode hängt das neue Token an die Header der ausgehenden Anfrage an.

finalize(() => {
  this.isRefreshingToken = false;
}),

---

Verwendung in einem Angular HTTP Interceptor

Ein HttpInterceptor ist der perfekte Ort, um diesen Workflow zu implementieren. Es ermöglicht Ihnen, alle HTTP-Anfragen abzufangen und die Token-Verwaltung global abzuwickeln, ohne einzelne Dienstaufrufe zu ändern.

addToken(request: HttpRequest<any>, token: string): HttpRequest<any> {
  return request.clone({
    setHeaders: {
      'X-Token': token,
    },
  });
}

Zusammenfassend lässt sich sagen, dass ein solider Token-Refresh-Workflow ein nahtloses Benutzererlebnis und eine sichere Sitzungsverwaltung in Angular-Anwendungen gewährleistet. Durch den effektiven Umgang mit 401-Fehlern und die Verwaltung gleichzeitiger Anfragen können Sie die Zuverlässigkeit aufrechterhalten und die Zufriedenheit Ihrer Benutzer gewährleisten. Vielen Dank fürs Lesen – teilen Sie uns unten gerne Ihre Gedanken oder Fragen mit!

Das obige ist der detaillierte Inhalt vonAktualisierungstoken in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!