Επίλυση JWT Refresh Token Handling σε Angular με HttpInterceptor

Εξασφάλιση απρόσκοπτης ανανέωσης JWT σε Angular Interceptors

Σε μια εφαρμογή ιστού με ασφαλείς περιόδους σύνδεσης χρήστη, η αποτελεσματική διαχείριση βραχείας διάρκειας JWT token είναι ζωτικής σημασίας για την αδιάλειπτη εμπειρία χρήστη. Όταν λήγουν τα διακριτικά, οι χρήστες αντιμετωπίζουν συχνά προβλήματα όπως το να αναγκάζονται να επανασυνδεθούν, κάτι που μπορεί να είναι απογοητευτικό και να διαταράξει την αφοσίωση των χρηστών. Για να αντιμετωπιστεί αυτό, οι προγραμματιστές συνήθως εφαρμόζουν αυτόματη ανανέωση διακριτικού χρησιμοποιώντας ένα Angular interceptor για τον χειρισμό των συνεδριών που έχουν λήξει. 🕰️

Αυτή η προσέγγιση περιλαμβάνει την υποκλοπή αιτημάτων HTTP, τη σύλληψη 401 σφαλμάτων (μη εξουσιοδοτημένα αιτήματα) και, στη συνέχεια, την κλήση μιας διαδικασίας ανανέωσης για την απόκτηση ενός νέου διακριτικού. Ωστόσο, ενδέχεται να προκύψουν ζητήματα όσον αφορά τη διασφάλιση της εφαρμογής του ενημερωμένου διακριτικού ή του cookie στα επαναδοκιμασμένα αιτήματα. Εάν το νέο διακριτικό δεν διαδίδεται σωστά, η επανάληψη μπορεί να αποτύχει, αφήνοντας τους χρήστες με το ίδιο σφάλμα εξουσιοδότησης και πιθανώς να διαταράσσονται οι ροές εργασίας της εφαρμογής.

Σε αυτόν τον οδηγό, θα δούμε μια πρακτική εφαρμογή αυτού του μοτίβου αναχαίτισης. Θα εξετάσουμε πώς να εντοπίζουμε σφάλματα, να ανανεώνουμε διακριτικά και να επιβεβαιώσουμε ότι τα αιτήματα δοκιμάζουν ξανά με έγκυρη εξουσιοδότηση. Αυτή η προσέγγιση ελαχιστοποιεί τις διακοπές ενώ σας δίνει τον έλεγχο της διαδικασίας ανανέωσης της περιόδου λειτουργίας.

Στο τέλος, θα αποκτήσετε πληροφορίες σχετικά με τον τρόπο αντιμετώπισης κοινών παγίδων, όπως ο χειρισμός των HttpOnly cookie και η διαχείριση ακολουθιών ανανέωσης κατά τη διάρκεια μεγάλων όγκων αιτημάτων. Αυτή η μέθοδος διασφαλίζει ότι η εφαρμογή σας μπορεί να διατηρήσει μια ασφαλή, ομαλή περίοδο λειτουργίας χρήστη χωρίς συνεχείς συνδέσεις. 🔒

Διασφάλιση αξιόπιστου ελέγχου ταυτότητας JWT με Angular Interceptors

Στο παραπάνω παράδειγμα, ο υποκλοπής έχει σχεδιαστεί για να ανανεώνει αυτόματα ένα βραχύβιο JWT token κάθε φορά που εμφανίζεται σφάλμα 401. Αυτό το είδος ρύθμισης είναι απαραίτητο σε εφαρμογές με ευαίσθητα δεδομένα, όπου η διατήρηση της ασφάλειας περιόδου λειτουργίας είναι κρίσιμης σημασίας, αλλά η εμπειρία χρήστη δεν πρέπει να διακόπτεται. Ο υποκλοπής εντοπίζει το σφάλμα 401 (Μη εξουσιοδοτημένο) και ξεκινά ένα αίτημα ανανέωσης διακριτικού για την ανανέωση της συνεδρίας χωρίς να απαιτείται από τον χρήστη εκ νέου έλεγχος ταυτότητας. Αυτή η διαδικασία ενεργοποιείται από τη συνάρτηση catchError, η οποία επιτρέπει το χειρισμό σφαλμάτων εντός ενός παρατηρήσιμου αγωγού. Εδώ, οποιοδήποτε σφάλμα HTTP, συγκεκριμένα ένα 401, σηματοδοτεί ότι το διακριτικό πιθανότατα έχει λήξει και ξεκινά τη διαδικασία ανανέωσης.

Η συνάρτηση switchMap είναι ένα άλλο βασικό στοιχείο εδώ. δημιουργεί μια νέα παρατηρήσιμη ροή για το ανανεωμένο αίτημα, αντικαθιστώντας το παλιό παρατηρήσιμο χωρίς να ακυρώσει ολόκληρη τη ροή. Μετά την ανανέωση, επαναλαμβάνει το αρχικό αίτημα, διασφαλίζοντας ότι εφαρμόζεται το νέο διακριτικό. Μεταβαίνοντας από το παλιό παρατηρήσιμο σε ένα νέο, ο αναχαιτιστής μπορεί να εκτελέσει την ανανέωση του διακριτικού με απρόσκοπτο, μη αποκλειστικό τρόπο. Αυτή η τεχνική είναι ιδιαίτερα πολύτιμη όταν εργάζεστε με εφαρμογές σε πραγματικό χρόνο, καθώς μειώνει τις διακοπές στις αλληλεπιδράσεις των χρηστών, ενώ παράλληλα διατηρεί ασφαλή έλεγχο ταυτότητας. Για παράδειγμα, ένας χρήστης που περιηγείται σε έναν ασφαλή οικονομικό πίνακα ελέγχου δεν θα ανακατευθυνθεί ή θα αποσυνδεθεί χωρίς λόγο. Αντίθετα, το νέο διακριτικό αποκτάται και εφαρμόζεται στο παρασκήνιο. 🔄

Επιπλέον, το BehaviorSubject διαδραματίζει κρίσιμο ρόλο με τη διαχείριση της κατάστασης της διαδικασίας ανανέωσης. Αυτό το βοηθητικό πρόγραμμα RxJS μπορεί να διατηρήσει την τελευταία τιμή που εκπέμπεται, η οποία είναι ιδιαίτερα χρήσιμη όταν πολλά αιτήματα αντιμετωπίζουν σφάλμα 401 ταυτόχρονα. Αντί να ενεργοποιεί πολλαπλές ανανεώσεις, ο παρεμποδιστής εκκινεί μόνο μία ανανέωση διακριτικού και όλα τα άλλα αιτήματα βρίσκονται στην ουρά για να περιμένουν αυτήν την ανανέωση ενός διακριτικού. Η χρήση του BehaviorSubject με το switchMap διασφαλίζει ότι εάν ένα αίτημα ενεργοποιεί την ανανέωση, όλα τα άλλα αιτήματα που χρειάζονται το νέο διακριτικό θα χρησιμοποιούν τα ενημερωμένα διαπιστευτήρια χωρίς να προκαλούν επαναλαμβανόμενες κλήσεις ανανέωσης. Αυτή η λειτουργία είναι εξαιρετικά χρήσιμη σε περιπτώσεις όπου οι χρήστες μπορεί να έχουν πολλές ανοιχτές καρτέλες ή η εφαρμογή διαχειρίζεται πολλές ταυτόχρονες κλήσεις δικτύου, εξοικονομώντας έτσι πόρους και αποφεύγοντας τον υπερβολικό φόρτο διακομιστή.

Η δοκιμή αυτής της λογικής αναχαίτισης είναι επίσης απαραίτητη για τη διασφάλιση ότι λειτουργεί σε διαφορετικά σενάρια, γι' αυτό συμπεριλαμβάνουμε το HttpTestingController. Αυτό το εργαλείο γωνιακής δοκιμής μάς δίνει τη δυνατότητα να προσομοιώνουμε και να δοκιμάζουμε αποκρίσεις HTTP, όπως η κατάσταση 401 Μη εξουσιοδοτημένη, σε ελεγχόμενο περιβάλλον. Χρησιμοποιώντας το flush, μια μέθοδο που παρέχεται από το HttpTestingController, οι προγραμματιστές μπορούν να προσομοιώσουν απαντήσεις σφαλμάτων στον πραγματικό κόσμο και να επαληθεύσουν ότι ο παρεμποδιστής συμπεριφέρεται όπως αναμένεται. Αυτή η προσέγγιση δοκιμών μας επιτρέπει να προσδιορίσουμε πόσο καλά η λογική ανανέωσης χειρίζεται διάφορες περιπτώσεις πριν από την ανάπτυξη της εφαρμογής. Με αυτές τις μεθόδους, ο υποκλοπής όχι μόνο διατηρεί τη συνεδρία με ασφάλεια, αλλά παρέχει επίσης μια πιο απρόσκοπτη, σταθερή εμπειρία για τους χρήστες που πλοηγούνται στην εφαρμογή. 👩‍💻

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { catchError, switchMap } from 'rxjs/operators';
import { Observable, throwError, BehaviorSubject } from 'rxjs';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  private refreshTokenInProgress$ = new BehaviorSubject<boolean>(false);
  constructor(private authService: AuthService, private router: Router) {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({ withCredentials: true });
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          return this.handle401Error(req, next);
        }
        return throwError(() => error);
      })
    );
  }
  private handle401Error(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this.refreshTokenInProgress$.getValue()) {
      this.refreshTokenInProgress$.next(true);
      return this.authService.refreshToken().pipe(
        switchMap(() => {
          this.refreshTokenInProgress$.next(false);
          return next.handle(req.clone({ withCredentials: true }));
        }),
        catchError((error) => {
          this.refreshTokenInProgress$.next(false);
          this.authService.logout();
          this.router.navigate(['/login'], { queryParams: { returnUrl: req.url } });
          return throwError(() => error);
        })
      );
    }
    return this.refreshTokenInProgress$.pipe(
      switchMap(() => next.handle(req.clone({ withCredentials: true })))
    );
  }
}

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { JwtInterceptor } from './jwt.interceptor';
import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { AuthService } from './auth.service';
describe('JwtInterceptor', () => {
  let httpMock: HttpTestingController;
  let authServiceSpy: jasmine.SpyObj<AuthService>;
  let httpClient: HttpClient;
  beforeEach(() => {
    authServiceSpy = jasmine.createSpyObj('AuthService', ['refreshToken', 'logout']);
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        JwtInterceptor,
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: AuthService, useValue: authServiceSpy }
      ]
    });
    httpMock = TestBed.inject(HttpTestingController);
    httpClient = TestBed.inject(HttpClient);
  });
  afterEach(() => {
    httpMock.verify();
  });
  it('should refresh token on 401 error and retry request', () => {
    authServiceSpy.refreshToken.and.returnValue(of(true));
    httpClient.get('/test').subscribe();
    const req = httpMock.expectOne('/test');
    req.flush(null, { status: 401, statusText: 'Unauthorized' });
    expect(authServiceSpy.refreshToken).toHaveBeenCalled();
  });
});

Επέκταση των στρατηγικών ανανέωσης διακριτικών JWT με Angular Interceptors

Μια κρίσιμη πτυχή της χρήσης ενός Angular Αναχαιτιστής διακριτικών JWT για ασφαλείς εφαρμογές χειρίζεται αποτελεσματικά την πολυπλοκότητα της διαχείρισης του ελέγχου ταυτότητας και της λήξης περιόδου λειτουργίας. Πέρα από την απλή καταγραφή σφαλμάτων 401 και την ανανέωση των διακριτικών, είναι σημαντικό να σκεφτείτε τον χειρισμό πολλών αιτημάτων και πώς να βελτιστοποιήσετε τις ανανεώσεις διακριτικών. Όταν πολλά αιτήματα αντιμετωπίζουν ένα σφάλμα 401 ταυτόχρονα, η εφαρμογή ενός μηχανισμού ουράς ή κλειδώματος μπορεί να είναι εξαιρετικά χρήσιμη για να διασφαλιστεί ότι πραγματοποιείται μόνο μία ανανέωση διακριτικού τη φορά. Αυτή η προσέγγιση αποτρέπει τις περιττές κλήσεις API και μειώνει το φόρτο, ειδικά σε εφαρμογές υψηλής επισκεψιμότητας, ενώ επιτρέπει σε όλα τα αιτήματα σε ουρά να προχωρήσουν μετά την ανανέωση.

Το Angular Interceptor μας επιτρέπει επίσης να βελτιστοποιήσουμε τον τρόπο με τον οποίο χειριζόμαστε την αποθήκευση και την ανάκτηση διακριτικών. Αντί να κωδικοποιείτε διακριτικά σε τοπικό χώρο αποθήκευσης, είναι καλύτερο να χρησιμοποιείτε το Angular Cookies HttpOnly και προστασία CSRF για ενίσχυση της ασφάλειας. Με τα cookie HttpOnly, δεν είναι δυνατή η πρόσβαση ή ο χειρισμός του JWT από JavaScript, βελτιώνοντας σημαντικά την ασφάλεια αλλά προσθέτοντας μια νέα πρόκληση: διασφαλίζοντας ότι τα αιτήματα λαμβάνουν αυτόματα το ανανεωμένο cookie. Το Angular είναι ενσωματωμένο withCredentials Η επιλογή είναι μια λύση, που δίνει εντολή στο πρόγραμμα περιήγησης να συμπεριλάβει αυτά τα cookies σε κάθε αίτημα.

Σε περιβάλλον παραγωγής, συνιστάται η εκτέλεση δοκιμών απόδοσης σχετικά με τον τρόπο συμπεριφοράς της εφαρμογής υπό φόρτωση με ανανεώσεις διακριτικών. Οι ρυθμίσεις δοκιμών μπορούν να προσομοιώσουν υψηλούς όγκους αιτημάτων, διασφαλίζοντας ότι η λογική του αναχαιτιστή κλιμακώνεται αποτελεσματικά. Στην πράξη, αυτή η ρύθμιση ελαχιστοποιεί τον κίνδυνο σφαλμάτων που σχετίζονται με διακριτικά που επηρεάζουν την εμπειρία του χρήστη. Η στρατηγική υποκλοπής, όταν συνδυάζεται με σωστό χειρισμό και δοκιμή cookie, βοηθά στη διατήρηση μιας απρόσκοπτης, φιλικής προς το χρήστη και ασφαλούς εφαρμογής—είτε η εφαρμογή διαχειρίζεται κρίσιμα οικονομικά δεδομένα είτε τις περιόδους σύνδεσης χρηστών μιας κοινωνικής πλατφόρμας. 🌐🔐