Menyelesaikan Pengendalian Token Refresh JWT dalam Sudut dengan HttpInterceptor

Memastikan Penyegaran JWT Lancar dalam Pemintas Sudut

Dalam apl web dengan sesi pengguna yang selamat, mengurus token JWT jangka pendek secara berkesan adalah penting untuk pengalaman pengguna yang tidak terganggu. Apabila token tamat tempoh, pengguna sering menghadapi isu seperti dipaksa untuk log masuk semula, yang boleh mengecewakan dan mengganggu penglibatan pengguna. Untuk menangani perkara ini, pembangun biasanya melaksanakan pemuatan semula token automatik menggunakan pemintas Sudut untuk mengendalikan sesi tamat tempoh. 🕰️

Pendekatan ini melibatkan memintas permintaan HTTP, menangkap 401 ralat (permintaan tidak dibenarkan), dan kemudian menggunakan proses muat semula untuk mendapatkan token baharu. Walau bagaimanapun, isu boleh timbul dalam memastikan token atau kuki yang dikemas kini digunakan pada permintaan yang dicuba semula. Jika token baharu tidak disebarkan dengan betul, percubaan semula mungkin gagal, menyebabkan pengguna mengalami ralat kebenaran yang sama dan berpotensi mengganggu aliran kerja apl.

Dalam panduan ini, kami akan melalui pelaksanaan praktikal corak pemintas ini. Kami akan melihat cara untuk menangkap ralat, memuat semula token dan mengesahkan bahawa permintaan mencuba semula dengan kebenaran yang sah. Pendekatan ini meminimumkan gangguan sambil memberi anda kawalan ke atas proses pembaharuan sesi.

Pada akhirnya, anda akan mendapat cerapan tentang cara menangani masalah biasa, seperti mengendalikan kuki HttpOnly dan mengurus jujukan muat semula semasa volum permintaan tinggi. Kaedah ini memastikan aplikasi anda boleh mengekalkan sesi pengguna yang selamat dan lancar tanpa log masuk berterusan. 🔒

Memastikan Pengesahan JWT Boleh Dipercayai dengan Pemintas Sudut

Dalam contoh di atas, pemintas direka bentuk untuk memuat semula token JWT jangka pendek secara automatik apabila ralat 401 ditemui. Persediaan jenis ini penting dalam aplikasi dengan data sensitif, yang mengekalkan keselamatan sesi adalah penting, tetapi pengalaman pengguna tidak boleh diganggu. Pemintas menangkap ralat 401 (Tidak Dibenarkan) dan memulakan permintaan token muat semula untuk memperbaharui sesi tanpa memerlukan pengguna untuk mengesahkan semula. Proses ini dicetuskan oleh fungsi catchError, yang membenarkan pengendalian ralat dalam saluran paip yang boleh diperhatikan. Di sini, sebarang ralat HTTP, khususnya 401, menandakan bahawa token itu berkemungkinan telah tamat tempoh dan memulakan proses penyegaran.

Fungsi switchMap ialah satu lagi elemen teras di sini; ia mencipta strim boleh diperhatikan baharu untuk permintaan yang dimuat semula, menggantikan yang boleh diperhatikan lama tanpa membatalkan keseluruhan aliran. Selepas memuat semula, ia mencuba semula permintaan asal, memastikan token baharu digunakan. Dengan menukar daripada pemerhatian lama kepada yang baharu, pemintas boleh melakukan pembaharuan token dengan cara yang lancar dan tidak menyekat. Teknik ini amat berharga apabila bekerja dengan aplikasi masa nyata, kerana ia mengurangkan gangguan dalam interaksi pengguna sambil mengekalkan pengesahan selamat. Sebagai contoh, pengguna yang menyemak imbas papan pemuka kewangan yang selamat tidak akan diubah hala atau dilog keluar tanpa perlu; sebaliknya, token baharu diperoleh dan digunakan di latar belakang. 🔄

Selain itu, BehaviorSubject memainkan peranan penting dengan mengurus keadaan proses muat semula. Utiliti RxJS ini boleh mengekalkan nilai yang dipancarkan terakhir, yang sangat membantu apabila berbilang permintaan menghadapi ralat 401 pada masa yang sama. Daripada mencetuskan berbilang muat semula, pemintas hanya memulakan satu muat semula token dan semua permintaan lain akan beratur untuk menunggu pembaharuan token tunggal ini. Menggunakan BehaviorSubject dengan switchMap membantu memastikan bahawa jika satu permintaan mencetuskan muat semula, semua permintaan lain yang memerlukan token baharu akan menggunakan bukti kelayakan yang dikemas kini tanpa menyebabkan panggilan muat semula berulang. Ciri ini sangat membantu dalam kes di mana pengguna mungkin mempunyai berbilang tab terbuka, atau apl menguruskan beberapa panggilan rangkaian serentak, sekali gus menjimatkan sumber dan mengelakkan beban pelayan yang berlebihan.

Menguji logik pemintas ini juga penting untuk memastikan ia berfungsi di bawah senario yang berbeza, itulah sebabnya kami menyertakan HttpTestingController. Alat ujian Sudut ini membolehkan kami mensimulasikan dan menguji respons HTTP, seperti status 401 Tanpa Kebenaran, dalam persekitaran terkawal. Menggunakan flush, kaedah yang disediakan oleh HttpTestingController, pembangun boleh mensimulasikan respons ralat dunia sebenar dan mengesahkan bahawa pemintas berkelakuan seperti yang diharapkan. Pendekatan ujian ini membolehkan kami memperhalusi sejauh mana logik muat semula mengendalikan pelbagai kes sebelum menggunakan apl. Dengan kaedah ini, pemintas bukan sahaja mengekalkan sesi dengan selamat tetapi juga menyediakan pengalaman yang lebih lancar dan stabil untuk pengguna yang menavigasi apl. 👩‍💻

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();
  });
});

Memperluaskan Strategi Penyegaran Token JWT dengan Pemintas Sudut

Aspek kritikal menggunakan Sudut Pemintas token JWT untuk aplikasi selamat adalah cekap mengendalikan kerumitan mengurus pengesahan dan tamat sesi. Selain daripada menangkap ralat 401 dan token yang menyegarkan, adalah penting untuk memikirkan pengendalian berbilang permintaan dan cara mengoptimumkan penyegaran token. Apabila berbilang permintaan menghadapi ralat 401 secara serentak, melaksanakan baris gilir atau mekanisme penguncian boleh menjadi sangat berguna untuk memastikan hanya satu muat semula token berlaku pada satu masa. Pendekatan ini menghalang panggilan API yang tidak diperlukan dan mengurangkan beban, terutamanya dalam aplikasi trafik tinggi, sambil membenarkan semua permintaan beratur untuk diteruskan selepas muat semula.

Pemintas Angular juga membolehkan kami menyelaraskan cara kami mengendalikan penyimpanan dan pengambilan token. Daripada token pengekodan keras dalam storan tempatan, sebaiknya gunakan Angular's Kuki HttpSahaja dan perlindungan CSRF untuk meningkatkan keselamatan. Dengan kuki HttpOnly, JWT tidak boleh diakses atau dimanipulasi oleh JavaScript, meningkatkan keselamatan dengan sangat baik tetapi menambah cabaran baharu: memastikan permintaan mengambil kuki yang dimuat semula secara automatik. Angular terbina dalam withCredentials pilihan ialah penyelesaian, mengarahkan penyemak imbas untuk memasukkan kuki ini pada setiap permintaan.

Dalam persekitaran pengeluaran, anda dinasihatkan untuk menjalankan ujian prestasi tentang cara aplikasi berkelakuan di bawah beban dengan penyegaran token. Persediaan ujian boleh mensimulasikan volum permintaan yang tinggi, memastikan bahawa skala logik pemintas dengan cekap. Dalam amalan, persediaan ini meminimumkan risiko ralat berkaitan token yang memberi kesan kepada pengalaman pengguna. Strategi pemintas, apabila digandingkan dengan pengendalian dan ujian kuki yang betul, membantu mengekalkan aplikasi yang lancar, mesra pengguna dan selamat—sama ada apl mengurus data kewangan kritikal atau sesi pengguna platform sosial. 🌐🔐