حل معالجة الرمز المميز لتحديث JWT في Angular باستخدام HttpInterceptor

تنفيذ JWT Interceptor مع Angular: معالجة الأخطاء وتحديث حل الرمز المميز

استخدام Angular مع بنية الخدمة المعيارية لمعالجة الأخطاء وإدارة الجلسة

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

اختبار الوحدة الزاوية لمعالجة تحديث رمز اعتراض JWT

اختبار تحديث JWT ومعالجة أخطاء HTTP في جهاز اعتراض Angular

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 باستخدام أجهزة الاعتراض الزاوي

1. كيف catchError مساعدة في التعامل مع رمز JWT؟
2. استخدام catchError داخل المعترض يسمح لنا بتحديد أخطاء 401 وتشغيل طلبات تحديث الرمز المميز بسلاسة عند انتهاء صلاحية الرموز المميزة.
3. لماذا BehaviorSubject تستخدم بدلا من Subject لتتبع حالة التحديث؟
4. BehaviorSubject يحتفظ بالقيمة المنبعثة الأخيرة، مما يجعله مفيدًا لإدارة حالات التحديث عبر الطلبات المتزامنة دون تشغيل مكالمات تحديث متعددة.
5. ما هو الدور الذي يفعله switchMap اللعب في إعادة محاولة طلبات HTTP؟
6. switchMap يسمح بالتبديل من تحديث الرمز المميز الذي يمكن ملاحظته إلى طلب HTTP المعاد محاولته، مما يضمن فقط أحدث عمليات الإكمال التي يمكن ملاحظتها.
7. كيف يمكنني اختبار المعترض في Angular؟
8. الزاوي HttpTestingController مفيد لمحاكاة استجابات HTTP، بما في ذلك أخطاء 401، للتحقق من أن منطق المعترض يعمل بشكل صحيح.
9. لماذا تستخدم withCredentials في الطلب المستنسخ؟
10. ال withCredentials تضمن العلامة تضمين ملفات تعريف الارتباط الآمنة HttpOnly في كل طلب، وهو أمر مهم للحفاظ على الجلسات الآمنة.
11. كيف يمكنني تحسين معالجة تحديث الرمز المميز في ظل حركة المرور الكثيفة؟
12. باستخدام واحد BehaviorSubject أو يمكن أن تساعد آلية القفل في منع طلبات التحديث المتعددة، مما يؤدي إلى تحسين الأداء في سيناريوهات حركة المرور العالية.
13. كيف يؤثر المعترض على تجربة المستخدم عند انتهاء صلاحية الجلسة؟
14. يتيح المعترض التجديد التلقائي للجلسة، لذلك لا يتم تسجيل خروج المستخدمين بشكل غير متوقع، مما يسمح بتجربة مستخدم أكثر سلاسة.
15. كيف clone مساعدة في تعديل الطلبات؟
16. clone ينشئ نسخة من الطلب مع خصائص معدلة، مثل الإعداد withCredentialsدون تغيير الطلب الأصلي.
17. هل يعمل المعترض مع جلسات مستخدمين متعددة؟
18. نعم، ولكن تحتاج كل جلسة إلى إدارة JWT الخاصة بها بشكل مستقل، أو يجب تكييف منطق التحديث لجلسات متعددة.
19. هل يستطيع المعترض التعامل مع الأخطاء غير 401؟
20. نعم، يمكن توسيع أداة الاعتراض لاكتشاف الأخطاء الأخرى، مثل 403 Forbidden، والتعامل معها بشكل مناسب للحصول على تجربة مستخدم أفضل.

تبسيط تحديث رمز JWT في التطبيقات الزاوية

تعد الإدارة الفعالة لرموز JWT أمرًا بالغ الأهمية لتعزيز تجربة المستخدم والأمان في تطبيقات Angular. من خلال تنفيذ أداة اعتراضية لاكتشاف الأخطاء 401 وبدء تحديث الرمز المميز تلقائيًا، يمكنك تجنب عمليات تسجيل الخروج القسري وتوفير تدفق مستخدم سلس. بالإضافة إلى ذلك، التعامل مع الطلبات المتزامنة أثناء التحديث بمساعدة موضوع السلوك، يضمن إجراء مكالمة تحديث واحدة فقط، مما يؤدي إلى تحسين استخدام الموارد.

في النهاية، الهدف هو تحقيق التوازن بين الأمان وراحة المستخدم. إن اختبار منطق الاعتراض وتحسينه بشكل منتظم لسيناريوهات العالم الحقيقي يسمح لتطبيقك بالتعامل مع كميات كبيرة من الطلبات دون مشكلة. يمكن أن يساعد اعتماد أفضل الممارسات في إدارة الرموز المميزة في الحفاظ على تجربة آمنة وسهلة الاستخدام عبر الجلسات. 👨‍💻