HttpInterceptor کے ساتھ Angular میں JWT ریفریش ٹوکن ہینڈلنگ کو حل کرنا

Angular Interceptors میں سیملیس JWT ریفریش کو یقینی بنانا

محفوظ یوزر سیشنز کے ساتھ ایک ویب ایپ میں، مختصر مدت کے JWT ٹوکنز کا مؤثر طریقے سے انتظام صارف کے بلاتعطل تجربے کے لیے بہت ضروری ہے۔ ٹوکن کی میعاد ختم ہونے پر، صارفین کو اکثر مسائل کا سامنا کرنا پڑتا ہے جیسے کہ دوبارہ لاگ ان کرنے پر مجبور کیا جانا، جو مایوس کن اور صارف کی مصروفیت میں خلل ڈال سکتا ہے۔ اس سے نمٹنے کے لیے، ڈیولپرز عام طور پر ایک ایگولر انٹرسیپٹر کا استعمال کرتے ہوئے آٹومیٹک ٹوکن ریفریش نافذ کرتے ہیں تاکہ میعاد ختم ہونے والے سیشنز کو ہینڈل کیا جا سکے۔ 🕰️

اس نقطہ نظر میں HTTP درخواستوں کو روکنا، 401 غلطیوں (غیر مجاز درخواستوں) کو پکڑنا، اور پھر نیا ٹوکن حاصل کرنے کے لیے ریفریش کے عمل کو شروع کرنا شامل ہے۔ تاہم، دوبارہ کوشش کی گئی درخواستوں پر اپ ڈیٹ شدہ ٹوکن یا کوکی کا اطلاق یقینی بنانے میں مسائل پیدا ہو سکتے ہیں۔ اگر نیا ٹوکن صحیح طریقے سے پروپیگنڈہ نہیں کرتا ہے، تو دوبارہ کوشش ناکام ہو سکتی ہے، جس سے صارفین کو اجازت دینے کی ایک ہی غلطی اور ممکنہ طور پر ایپ کے ورک فلو میں خلل پڑتا ہے۔

اس گائیڈ میں، ہم اس انٹرسیپٹر پیٹرن کے عملی نفاذ کے ذریعے چلیں گے۔ ہم دیکھیں گے کہ غلطیوں کو کیسے پکڑا جائے، ٹوکن ریفریش کریں، اور تصدیق کریں گے کہ درخواستیں درست اجازت کے ساتھ دوبارہ کوشش کریں۔ یہ طریقہ آپ کو سیشن کی تجدید کے عمل پر کنٹرول دیتے ہوئے رکاوٹوں کو کم کرتا ہے۔

آخر تک، آپ اس بارے میں بصیرت حاصل کر لیں گے کہ عام خرابیوں کو کیسے حل کیا جائے، جیسے HttpOnly کوکیز کو ہینڈل کرنا اور زیادہ درخواست والے حجم کے دوران ریفریش سیکوینسز کا نظم کرنا۔ یہ طریقہ یقینی بناتا ہے کہ آپ کی درخواست مسلسل لاگ ان کے بغیر ایک محفوظ، ہموار صارف سیشن کو برقرار رکھ سکتی ہے۔ 🔒

Angular Interceptors کے ساتھ قابل اعتماد JWT تصدیق کو یقینی بنانا

اوپر دی گئی مثال میں، انٹرسیپٹر کو اس لیے ڈیزائن کیا گیا ہے کہ جب بھی 401 کی خرابی کا سامنا ہو تو ایک مختصر مدت کے JWT ٹوکن کو خود بخود ریفریش کیا جائے۔ اس قسم کا سیٹ اپ حساس ڈیٹا والی ایپلیکیشنز میں ضروری ہے، جہاں سیشن کی حفاظت کو برقرار رکھنا بہت ضروری ہے، لیکن صارف کے تجربے میں خلل نہیں آنا چاہیے۔ انٹرسیپٹر 401 (غیر مجاز) غلطی کو پکڑتا ہے اور صارف کو دوبارہ تصدیق کرنے کی ضرورت کے بغیر سیشن کی تجدید کے لیے ریفریش ٹوکن کی درخواست شروع کرتا ہے۔ یہ عمل catchError فنکشن سے شروع ہوتا ہے، جو قابل مشاہدہ پائپ لائن کے اندر غلطی سے نمٹنے کی اجازت دیتا ہے۔ یہاں، کوئی بھی HTTP خرابی، خاص طور پر 401، اشارہ کرتا ہے کہ ٹوکن ممکنہ طور پر ختم ہو چکا ہے اور تازہ کاری کا عمل شروع کرتا ہے۔

switchMap فنکشن یہاں ایک اور بنیادی عنصر ہے۔ یہ ریفریش شدہ درخواست کے لیے ایک نیا قابل مشاہدہ سلسلہ بناتا ہے، پورے بہاؤ کو منسوخ کیے بغیر پرانے قابل مشاہدہ کی جگہ لے لیتا ہے۔ ریفریش کرنے کے بعد، یہ اصل درخواست کی دوبارہ کوشش کرتا ہے، اس بات کو یقینی بناتے ہوئے کہ نیا ٹوکن لاگو ہو گیا ہے۔ پرانے قابل مشاہدہ سے نئے میں تبدیل کر کے، انٹرسیپٹر ٹوکن کی تجدید کو بغیر کسی رکاوٹ کے، بغیر کسی رکاوٹ کے انجام دے سکتا ہے۔ ریئل ٹائم ایپلی کیشنز کے ساتھ کام کرتے وقت یہ تکنیک خاص طور پر قابل قدر ہے، کیونکہ یہ محفوظ تصدیق کو برقرار رکھتے ہوئے صارف کے تعاملات میں رکاوٹوں کو کم کرتی ہے۔ مثال کے طور پر، ایک محفوظ مالیاتی ڈیش بورڈ براؤز کرنے والے صارف کو غیر ضروری طور پر ری ڈائریکٹ یا لاگ آؤٹ نہیں کیا جائے گا۔ اس کے بجائے، نیا ٹوکن حاصل کیا جاتا ہے اور پس منظر میں لاگو کیا جاتا ہے۔ 🔄

مزید برآں، BehaviorSubject ریفریش کے عمل کی حالت کو منظم کرکے ایک اہم کردار ادا کرتا ہے۔ یہ RxJS یوٹیلیٹی آخری خارج ہونے والی قدر کو برقرار رکھ سکتی ہے، جو خاص طور پر اس وقت مددگار ثابت ہوتی ہے جب ایک ہی وقت میں متعدد درخواستوں کو 401 کی خرابی کا سامنا ہو۔ متعدد ریفریشز کو متحرک کرنے کے بجائے، انٹرسیپٹر صرف ایک ٹوکن ریفریش شروع کرتا ہے، اور باقی تمام درخواستیں اس واحد ٹوکن کی تجدید کا انتظار کرنے کے لیے قطار میں لگ جاتی ہیں۔ switchMap کے ساتھ BehaviorSubject کا استعمال اس بات کو یقینی بنانے میں مدد کرتا ہے کہ اگر ایک درخواست ریفریش کو متحرک کرتی ہے، تو نئے ٹوکن کی ضرورت والی تمام درخواستیں بار بار ریفریش کالز کیے بغیر اپ ڈیٹ شدہ اسناد کا استعمال کریں گی۔ یہ فیچر ان صورتوں میں انتہائی مددگار ہے جہاں صارفین کے پاس متعدد کھلے ٹیبز ہو سکتے ہیں، یا ایپ بیک وقت کئی نیٹ ورک کالز کا انتظام کر رہی ہے، اس طرح وسائل کی بچت ہوتی ہے اور سرور کے بہت زیادہ بوجھ سے بچا جا سکتا ہے۔

اس انٹرسیپٹر منطق کی جانچ اس بات کو یقینی بنانے کے لیے بھی ضروری ہے کہ یہ مختلف منظرناموں میں کام کرتا ہے، اسی لیے ہم HttpTestingController کو شامل کرتے ہیں۔ یہ انگولر ٹیسٹنگ ٹول ہمیں ایک کنٹرولڈ ماحول میں 401 غیر مجاز حیثیت کی طرح HTTP جوابات کی تقلید اور جانچ کرنے کے قابل بناتا ہے۔ 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();
  });
});

Angular Interceptors کے ساتھ JWT ٹوکن ریفریش حکمت عملی کو بڑھانا

کونیی استعمال کرنے کا ایک اہم پہلو JWT ٹوکن انٹرسیپٹر محفوظ ایپلی کیشنز کے لیے توثیق اور سیشن کی میعاد ختم ہونے کے انتظام کی پیچیدگیوں کو مؤثر طریقے سے ہینڈل کر رہا ہے۔ صرف 401 غلطیوں کو پکڑنے اور ٹوکنز کو تازہ کرنے کے علاوہ، کثیر درخواستوں سے نمٹنے کے بارے میں سوچنا ضروری ہے اور ٹوکن ریفریش کو کس طرح بہتر بنایا جائے۔ جب متعدد درخواستوں میں بیک وقت 401 غلطی کا سامنا ہوتا ہے، تو قطار یا لاکنگ میکانزم کو لاگو کرنا انتہائی مفید ہو سکتا ہے تاکہ یہ یقینی بنایا جا سکے کہ ایک وقت میں صرف ایک ٹوکن ریفریش ہوتا ہے۔ یہ نقطہ نظر غیر ضروری API کالوں کو روکتا ہے اور بوجھ کو کم کرتا ہے، خاص طور پر ہائی ٹریفک ایپلی کیشنز میں، جب کہ ریفریش کے بعد قطار میں لگی تمام درخواستوں کو آگے بڑھنے کی اجازت دیتا ہے۔

انگولر کے انٹرسیپٹرز ہمیں ہموار کرنے کی بھی اجازت دیتے ہیں کہ ہم ٹوکن اسٹوریج اور بازیافت کو کیسے ہینڈل کرتے ہیں۔ مقامی اسٹوریج میں ٹوکن کو ہارڈ کوڈنگ کرنے کے بجائے، انگولر کا استعمال کرنا بہتر ہے۔ صرف HTTP کوکیز اور سیکورٹی کو بڑھانے کے لیے CSRF تحفظ۔ HttpOnly کوکیز کے ساتھ، JWT تک جاوا اسکرپٹ کے ذریعے رسائی یا ہیرا پھیری نہیں کی جا سکتی ہے، جس سے سیکیورٹی میں کافی بہتری آتی ہے لیکن ایک نیا چیلنج شامل ہوتا ہے: اس بات کو یقینی بنانا کہ درخواستیں خود بخود ریفریش شدہ کوکی کو اٹھا لیں۔ کونیی بلٹ ان ہے۔ withCredentials آپشن ایک حل ہے، براؤزر کو ہر درخواست پر ان کوکیز کو شامل کرنے کی ہدایت کرتا ہے۔

پیداواری ماحول میں، کارکردگی کے ٹیسٹ چلانے کا مشورہ دیا جاتا ہے کہ ایپلیکیشن ٹوکن ریفریش کے ساتھ بوجھ کے نیچے کیسے برتاؤ کرتی ہے۔ ٹیسٹنگ سیٹ اپ اعلی درخواست والے حجم کی تقلید کر سکتے ہیں، اس بات کو یقینی بناتے ہوئے کہ انٹرسیپٹر کی منطق مؤثر طریقے سے پیمانہ ہو۔ عملی طور پر، یہ سیٹ اپ صارف کے تجربے کو متاثر کرنے والی ٹوکن سے متعلق غلطیوں کے خطرے کو کم کرتا ہے۔ انٹرسیپٹر حکمت عملی، جب مناسب کوکی ہینڈلنگ اور ٹیسٹنگ کے ساتھ جوڑا بنایا جاتا ہے، ایک ہموار، صارف دوست، اور محفوظ ایپلیکیشن کو برقرار رکھنے میں مدد کرتا ہے— خواہ ایپ اہم مالیاتی ڈیٹا کا انتظام کرتی ہو یا سماجی پلیٹ فارم کے صارف سیشنز۔ 🌐🔐