Menyelesaikan Penanganan Token Penyegaran JWT di Angular dengan HttpInterceptor

Memastikan Penyegaran JWT yang Mulus di Angular Interceptor

Dalam aplikasi web dengan sesi pengguna yang aman, mengelola token JWT berumur pendek secara efektif sangat penting untuk pengalaman pengguna tanpa gangguan. Saat token habis masa berlakunya, pengguna sering kali mengalami masalah seperti dipaksa masuk kembali, yang dapat membuat frustasi dan mengganggu interaksi pengguna. Untuk mengatasi hal ini, pengembang biasanya menerapkan penyegaran token otomatis menggunakan interseptor Angular untuk menangani sesi yang kedaluwarsa. 🕰️

Pendekatan ini melibatkan intersepsi permintaan HTTP, menangkap kesalahan 401 (permintaan tidak sah), dan kemudian menjalankan proses penyegaran untuk mendapatkan token baru. Namun, masalah dapat muncul dalam memastikan token atau cookie yang diperbarui diterapkan pada permintaan yang dicoba ulang. Jika token baru tidak diterapkan dengan benar, percobaan ulang mungkin gagal, sehingga pengguna mengalami kesalahan otorisasi yang sama dan berpotensi mengganggu alur kerja aplikasi.

Dalam panduan ini, kita akan membahas implementasi praktis dari pola pencegat ini. Kita akan melihat cara menangkap kesalahan, menyegarkan token, dan mengonfirmasi bahwa permintaan dicoba ulang dengan otorisasi yang valid. Pendekatan ini meminimalkan interupsi sekaligus memberi Anda kendali atas proses pembaruan sesi.

Pada akhirnya, Anda akan mendapatkan wawasan tentang cara mengatasi kendala umum, seperti menangani cookie HttpOnly dan mengelola urutan penyegaran selama volume permintaan tinggi. Metode ini memastikan aplikasi Anda dapat mempertahankan sesi pengguna yang aman dan lancar tanpa login terus-menerus. 🔒

Memastikan Otentikasi JWT yang Andal dengan Angular Interceptor

Dalam contoh di atas, pencegat dirancang untuk secara otomatis menyegarkan token JWT yang berumur pendek setiap kali terjadi kesalahan 401. Penyiapan semacam ini penting dalam aplikasi dengan data sensitif, di mana menjaga keamanan sesi sangatlah penting, namun pengalaman pengguna tidak boleh terganggu. Pencegat menangkap kesalahan 401 (Tidak Sah) dan memulai permintaan token penyegaran untuk memperbarui sesi tanpa mengharuskan pengguna untuk mengautentikasi ulang. Proses ini dipicu oleh fungsi catchError, yang memungkinkan penanganan kesalahan dalam alur yang dapat diamati. Di sini, kesalahan HTTP apa pun, khususnya 401, menandakan bahwa token kemungkinan besar telah kedaluwarsa dan memulai proses penyegaran.

Fungsi switchMap adalah elemen inti lainnya di sini; itu membuat aliran baru yang dapat diobservasi untuk permintaan yang disegarkan, menggantikan aliran yang dapat diobservasi lama tanpa membatalkan seluruh aliran. Setelah menyegarkan, ia mencoba kembali permintaan awal, memastikan bahwa token baru diterapkan. Dengan beralih dari observasi lama ke observasi baru, pencegat dapat melakukan pembaruan token dengan cara yang mulus dan tanpa pemblokiran. Teknik ini sangat berguna ketika bekerja dengan aplikasi real-time, karena mengurangi gangguan dalam interaksi pengguna sambil tetap menjaga otentikasi aman. Misalnya, pengguna yang menjelajahi dasbor keuangan aman tidak akan dialihkan atau keluar jika tidak perlu; sebaliknya, token baru diperoleh dan diterapkan di latar belakang. 🔄

Selain itu, BehaviorSubject memainkan peran penting dengan mengelola status proses penyegaran. Utilitas RxJS ini dapat mempertahankan nilai terakhir yang dikeluarkan, yang sangat membantu ketika beberapa permintaan mengalami kesalahan 401 secara bersamaan. Alih-alih memicu beberapa penyegaran, pencegat hanya memulai satu penyegaran token, dan semua permintaan lainnya diantri untuk menunggu pembaruan token tunggal ini. Menggunakan BehaviorSubject dengan switchMap membantu memastikan bahwa jika satu permintaan memicu penyegaran, semua permintaan lain yang memerlukan token baru akan menggunakan kredensial yang diperbarui tanpa menyebabkan panggilan penyegaran berulang. Fitur ini sangat membantu jika pengguna memiliki beberapa tab yang terbuka, atau aplikasi mengelola beberapa panggilan jaringan secara bersamaan, sehingga menghemat sumber daya dan menghindari beban server yang berlebihan.

Menguji logika pencegat ini juga penting untuk memastikan bahwa logika ini berfungsi dalam skenario yang berbeda, itulah sebabnya kami menyertakan HttpTestingController. Alat pengujian Angular ini memungkinkan kami mensimulasikan dan menguji respons HTTP, seperti status 401 Tidak Sah, dalam lingkungan terkendali. Dengan menggunakan flush, metode yang disediakan oleh HttpTestingController, pengembang dapat mensimulasikan respons kesalahan di dunia nyata dan memverifikasi bahwa pencegat berperilaku seperti yang diharapkan. Pendekatan pengujian ini memungkinkan kami menyempurnakan seberapa baik logika penyegaran menangani berbagai kasus sebelum menerapkan aplikasi. Dengan metode ini, pencegat tidak hanya menjaga sesi dengan aman tetapi juga memberikan pengalaman yang lebih lancar dan stabil bagi pengguna dalam menavigasi aplikasi. 👩‍💻

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

Memperluas Strategi Penyegaran Token JWT dengan Angular Interceptors

Aspek penting dalam menggunakan Angular pencegat token JWT untuk aplikasi aman secara efisien menangani kompleksitas pengelolaan otentikasi dan kedaluwarsa sesi. Selain sekadar mendeteksi kesalahan 401 dan menyegarkan token, penting juga untuk memikirkan penanganan multi-permintaan dan cara mengoptimalkan penyegaran token. Ketika beberapa permintaan mengalami kesalahan 401 secara bersamaan, penerapan mekanisme antrian atau penguncian bisa sangat berguna untuk memastikan hanya satu penyegaran token yang terjadi pada satu waktu. Pendekatan ini mencegah panggilan API yang tidak perlu dan mengurangi beban, terutama pada aplikasi dengan lalu lintas tinggi, sekaligus memungkinkan semua permintaan antrean untuk dilanjutkan setelah penyegaran.

Pencegat Angular juga memungkinkan kami menyederhanakan cara kami menangani penyimpanan dan pengambilan token. Daripada melakukan hardcoding token di penyimpanan lokal, lebih baik menggunakan Angular Cookie HttpOnly dan perlindungan CSRF untuk meningkatkan keamanan. Dengan cookie HttpOnly, JWT tidak dapat diakses atau dimanipulasi oleh JavaScript, sehingga sangat meningkatkan keamanan tetapi menambahkan tantangan baru: memastikan bahwa permintaan mengambil cookie yang disegarkan secara otomatis. bawaan Angular withCredentials opsi adalah solusinya, menginstruksikan browser untuk menyertakan cookie ini pada setiap permintaan.

Dalam lingkungan produksi, disarankan untuk menjalankan tes kinerja tentang bagaimana aplikasi berperilaku saat dimuat dengan penyegaran token. Penyiapan pengujian dapat mensimulasikan volume permintaan yang tinggi, memastikan bahwa logika pencegat berskala secara efisien. Dalam praktiknya, pengaturan ini meminimalkan risiko kesalahan terkait token yang berdampak pada pengalaman pengguna. Strategi pencegat, jika dipadukan dengan penanganan dan pengujian cookie yang tepat, akan membantu mempertahankan aplikasi yang lancar, mudah digunakan, dan aman—baik aplikasi tersebut mengelola data keuangan penting atau sesi pengguna platform sosial. 🌐🔐