HttpInterceptor-এর সাহায্যে কৌণিকভাবে JWT রিফ্রেশ টোকেন হ্যান্ডলিং সমাধান করা

কৌণিক ইন্টারসেপ্টরগুলিতে বিজোড় JWT রিফ্রেশ নিশ্চিত করা

নিরাপদ ব্যবহারকারীর সেশন সহ একটি ওয়েব অ্যাপে, স্বল্পকালীন JWT টোকেন কার্যকরভাবে পরিচালনা করা নিরবচ্ছিন্ন ব্যবহারকারীর অভিজ্ঞতার জন্য অত্যন্ত গুরুত্বপূর্ণ। টোকেনগুলির মেয়াদ শেষ হয়ে গেলে, ব্যবহারকারীরা প্রায়শই পুনরায় লগইন করতে বাধ্য হওয়ার মতো সমস্যার সম্মুখীন হন, যা হতাশাজনক হতে পারে এবং ব্যবহারকারীর ব্যস্ততাকে ব্যাহত করতে পারে। এটি মোকাবেলা করার জন্য, বিকাশকারীরা সাধারণত মেয়াদোত্তীর্ণ সেশনগুলি পরিচালনা করতে একটি কৌণিক ইন্টারসেপ্টর ব্যবহার করে স্বয়ংক্রিয় টোকেন রিফ্রেশ প্রয়োগ করে। 🕰️

এই পদ্ধতিতে HTTP অনুরোধগুলিকে বাধা দেওয়া, 401 ত্রুটি (অননুমোদিত অনুরোধগুলি) ধরা এবং তারপর একটি নতুন টোকেন পাওয়ার জন্য একটি রিফ্রেশ প্রক্রিয়া শুরু করা জড়িত। যাইহোক, আপডেট করা টোকেন বা কুকি পুনরায় চেষ্টা করা অনুরোধগুলিতে প্রয়োগ করা হয়েছে তা নিশ্চিত করতে সমস্যা দেখা দিতে পারে। নতুন টোকেন সঠিকভাবে প্রচার না হলে, পুনরায় চেষ্টা ব্যর্থ হতে পারে, ব্যবহারকারীদের একই অনুমোদন ত্রুটি এবং সম্ভাব্যভাবে অ্যাপের কার্যপ্রবাহ ব্যাহত হতে পারে।

এই নির্দেশিকায়, আমরা এই ইন্টারসেপ্টর প্যাটার্ন এর ব্যবহারিক বাস্তবায়নের মধ্য দিয়ে চলে যাব। আমরা কীভাবে ত্রুটিগুলি ধরতে হয়, টোকেনগুলি রিফ্রেশ করতে হয় এবং বৈধ অনুমোদনের সাথে অনুরোধগুলি পুনরায় চেষ্টা করার বিষয়টি নিশ্চিত করব। এই পদ্ধতিটি আপনাকে সেশন পুনর্নবীকরণ প্রক্রিয়ার উপর নিয়ন্ত্রণ দেওয়ার সময় বাধাগুলি হ্রাস করে।

শেষ পর্যন্ত, আপনি কীভাবে সাধারণ সমস্যাগুলি সমাধান করবেন সে সম্পর্কে অন্তর্দৃষ্টি পাবেন, যেমন HttpOnly কুকিজ পরিচালনা করা এবং উচ্চ অনুরোধ ভলিউমের সময় রিফ্রেশ সিকোয়েন্স পরিচালনা করা। এই পদ্ধতিটি নিশ্চিত করে যে আপনার অ্যাপ্লিকেশনটি অবিচ্ছিন্ন লগইন ছাড়াই একটি নিরাপদ, মসৃণ ব্যবহারকারী সেশন বজায় রাখতে পারে। 🔒

কৌণিক ইন্টারসেপ্টর সহ নির্ভরযোগ্য JWT প্রমাণীকরণ নিশ্চিত করা

উপরের উদাহরণে, ইন্টারসেপ্টরটি স্বয়ংক্রিয়ভাবে একটি স্বল্পকালীন JWT টোকেন রিফ্রেশ করার জন্য ডিজাইন করা হয়েছে যখনই একটি 401 ত্রুটির সম্মুখীন হয়। সংবেদনশীল ডেটা সহ অ্যাপ্লিকেশনগুলিতে এই ধরণের সেটআপ অপরিহার্য, যেখানে সেশন সুরক্ষা বজায় রাখা গুরুত্বপূর্ণ, তবে ব্যবহারকারীর অভিজ্ঞতা ব্যাহত হওয়া উচিত নয়। ইন্টারসেপ্টর 401 (অননুমোদিত) ত্রুটিটি ধরে এবং ব্যবহারকারীকে পুনরায় প্রমাণীকরণের প্রয়োজন ছাড়াই সেশনটি পুনর্নবীকরণ করার জন্য একটি রিফ্রেশ টোকেন অনুরোধ শুরু করে। এই প্রক্রিয়াটি catchError ফাংশন দ্বারা ট্রিগার করা হয়, যা একটি পর্যবেক্ষণযোগ্য পাইপলাইনের মধ্যে ত্রুটি পরিচালনা করার অনুমতি দেয়। এখানে, কোনো HTTP ত্রুটি, বিশেষ করে একটি 401, সংকেত দেয় যে টোকেনের মেয়াদ শেষ হয়ে গেছে এবং রিফ্রেশিং প্রক্রিয়া শুরু করে।

switchMap ফাংশন এখানে আরেকটি মূল উপাদান; এটি রিফ্রেশ করা অনুরোধের জন্য একটি নতুন পর্যবেক্ষণযোগ্য স্ট্রিম তৈরি করে, পুরো প্রবাহটি বাতিল না করে পুরানো পর্যবেক্ষণযোগ্য প্রতিস্থাপন করে। রিফ্রেশ করার পরে, এটি নতুন টোকেন প্রয়োগ করা হয়েছে তা নিশ্চিত করে মূল অনুরোধটি পুনরায় চেষ্টা করে। পুরানো পর্যবেক্ষণযোগ্য থেকে নতুন একটিতে স্যুইচ করার মাধ্যমে, ইন্টারসেপ্টর টোকেন পুনর্নবীকরণটি নির্বিঘ্ন, অ-অবরোধক পদ্ধতিতে করতে পারে। রিয়েল-টাইম অ্যাপ্লিকেশনগুলির সাথে কাজ করার সময় এই কৌশলটি বিশেষভাবে মূল্যবান, কারণ এটি এখনও নিরাপদ প্রমাণীকরণ বজায় রেখে ব্যবহারকারীর মিথস্ক্রিয়ায় বাধা কমায়। উদাহরণস্বরূপ, একটি নিরাপদ আর্থিক ড্যাশবোর্ড ব্রাউজ করা ব্যবহারকারীকে অপ্রয়োজনীয়ভাবে পুনঃনির্দেশিত বা লগ আউট করা হবে না; পরিবর্তে, নতুন টোকেন অর্জিত হয় এবং পটভূমিতে প্রয়োগ করা হয়। 🔄

উপরন্তু, আচরণ বিষয় রিফ্রেশ প্রক্রিয়ার অবস্থা পরিচালনা করে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। এই RxJS ইউটিলিটি শেষ নির্গত মান ধরে রাখতে পারে, যা বিশেষত সহায়ক যখন একাধিক অনুরোধ একই সময়ে একটি 401 ত্রুটির সম্মুখীন হয়। একাধিক রিফ্রেশ ট্রিগার করার পরিবর্তে, ইন্টারসেপ্টর শুধুমাত্র একটি টোকেন রিফ্রেশ শুরু করে, এবং অন্যান্য সমস্ত অনুরোধ এই একক টোকেন পুনর্নবীকরণের জন্য অপেক্ষা করার জন্য সারিবদ্ধ করা হয়। সুইচম্যাপের সাথে বিহেভিয়ারসাবজেক্ট ব্যবহার করা নিশ্চিত করতে সাহায্য করে যে যদি একটি অনুরোধ রিফ্রেশকে ট্রিগার করে, নতুন টোকেনের প্রয়োজনে অন্য সমস্ত অনুরোধগুলি বারবার রিফ্রেশ কল না করেই আপডেট হওয়া শংসাপত্রগুলি ব্যবহার করবে। এই বৈশিষ্ট্যটি এমন ক্ষেত্রে অত্যন্ত সহায়ক যেখানে ব্যবহারকারীদের একাধিক খোলা ট্যাব থাকতে পারে, বা অ্যাপটি একাধিক একযোগে নেটওয়ার্ক কল পরিচালনা করছে, এইভাবে সংস্থানগুলি সংরক্ষণ করে এবং অতিরিক্ত সার্ভার লোড এড়ায়।

এই ইন্টারসেপ্টর লজিক পরীক্ষা করাও এটা নিশ্চিত করার জন্য অপরিহার্য যে এটি বিভিন্ন পরিস্থিতিতে কাজ করে, তাই আমরা 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();
  });
});

কৌণিক ইন্টারসেপ্টর সহ JWT টোকেন রিফ্রেশ কৌশলগুলি প্রসারিত করা

একটি কৌণিক ব্যবহার করার একটি সমালোচনামূলক দিক JWT টোকেন ইন্টারসেপ্টর সুরক্ষিত অ্যাপ্লিকেশনগুলির জন্য দক্ষতার সাথে প্রমাণীকরণ এবং সেশনের মেয়াদ শেষ হওয়ার ব্যবস্থাপনার জটিলতাগুলি পরিচালনা করছে। শুধুমাত্র 401 ত্রুটি ধরা এবং টোকেন রিফ্রেশ করার বাইরে, বহু-অনুরোধ পরিচালনা এবং টোকেন রিফ্রেশগুলিকে কীভাবে অপ্টিমাইজ করা যায় সে সম্পর্কে চিন্তা করা অপরিহার্য। যখন একাধিক অনুরোধ একই সাথে একটি 401 ত্রুটির সম্মুখীন হয়, তখন একটি সারি বা লকিং প্রক্রিয়া প্রয়োগ করা অত্যন্ত কার্যকর হতে পারে যাতে একটি সময়ে শুধুমাত্র একটি টোকেন রিফ্রেশ হয়। এই পদ্ধতিটি অপ্রয়োজনীয় API কল প্রতিরোধ করে এবং লোড হ্রাস করে, বিশেষ করে উচ্চ-ট্রাফিক অ্যাপ্লিকেশনগুলিতে, রিফ্রেশের পরে সমস্ত সারিবদ্ধ অনুরোধগুলিকে এগিয়ে যাওয়ার অনুমতি দেয়।

কৌণিক এর ইন্টারসেপ্টরগুলি আমাদেরকে স্ট্রিমলাইন করার অনুমতি দেয় যে আমরা কীভাবে টোকেন স্টোরেজ এবং পুনরুদ্ধার পরিচালনা করি। স্থানীয় স্টোরেজে হার্ডকোডিং টোকেন না করে, Angular's ব্যবহার করাই ভালো শুধুমাত্র Http কুকিজ এবং নিরাপত্তা বাড়ানোর জন্য CSRF সুরক্ষা। HttpOnly কুকির সাহায্যে, JWT জাভাস্ক্রিপ্টের মাধ্যমে অ্যাক্সেস করা যায় না বা ম্যানিপুলেট করা যায় না, যা নিরাপত্তাকে ব্যাপকভাবে উন্নত করে কিন্তু একটি নতুন চ্যালেঞ্জ যোগ করে: অনুরোধগুলি স্বয়ংক্রিয়ভাবে রিফ্রেশ করা কুকি তুলে নেয় তা নিশ্চিত করা। কৌণিক এর অন্তর্নির্মিত withCredentials বিকল্প একটি সমাধান, ব্রাউজারকে প্রতিটি অনুরোধে এই কুকিগুলি অন্তর্ভুক্ত করার নির্দেশ দেয়।

একটি উত্পাদন পরিবেশে, টোকেন রিফ্রেশের সাথে অ্যাপ্লিকেশনটি কীভাবে লোডের অধীনে আচরণ করে তার কার্যক্ষমতা পরীক্ষা চালানোর পরামর্শ দেওয়া হয়। পরীক্ষার সেটআপগুলি উচ্চ অনুরোধের ভলিউম অনুকরণ করতে পারে, এটি নিশ্চিত করে যে ইন্টারসেপ্টরের লজিক স্কেল দক্ষতার সাথে। অনুশীলনে, এই সেটআপটি ব্যবহারকারীর অভিজ্ঞতাকে প্রভাবিত করে টোকেন-সম্পর্কিত ত্রুটির ঝুঁকি কমিয়ে দেয়। ইন্টারসেপ্টর কৌশল, যখন সঠিক কুকি হ্যান্ডলিং এবং পরীক্ষার সাথে যুক্ত করা হয়, তখন একটি নিরবচ্ছিন্ন, ব্যবহারকারী-বান্ধব এবং সুরক্ষিত অ্যাপ্লিকেশন বজায় রাখতে সাহায্য করে - অ্যাপটি সমালোচনামূলক আর্থিক ডেটা বা সামাজিক প্ল্যাটফর্মের ব্যবহারকারীর সেশনগুলি পরিচালনা করে। 🌐🔐