HttpInterceptor के साथ एंगुलर में JWT रिफ्रेश टोकन हैंडलिंग को हल करना

एंगुलर इंटरसेप्टर्स में निर्बाध जेडब्ल्यूटी रिफ्रेश सुनिश्चित करना

सुरक्षित उपयोगकर्ता सत्र वाले वेब ऐप में, निर्बाध उपयोगकर्ता अनुभव के लिए अल्पकालिक JWT टोकन को प्रभावी ढंग से प्रबंधित करना महत्वपूर्ण है। जब टोकन समाप्त हो जाते हैं, तो उपयोगकर्ताओं को अक्सर पुन: लॉगिन करने के लिए मजबूर होने जैसी समस्याओं का सामना करना पड़ता है, जो निराशाजनक हो सकता है और उपयोगकर्ता सहभागिता को बाधित कर सकता है। इससे निपटने के लिए, डेवलपर्स आमतौर पर समाप्त सत्रों को संभालने के लिए एंगुलर इंटरसेप्टर का उपयोग करके स्वचालित टोकन रिफ्रेश लागू करते हैं। 🕰️

इस दृष्टिकोण में HTTP अनुरोधों को रोकना, 401 त्रुटियों (अनधिकृत अनुरोधों) को पकड़ना और फिर एक नया टोकन प्राप्त करने के लिए ताज़ा प्रक्रिया को लागू करना शामिल है। हालाँकि, यह सुनिश्चित करने में समस्याएँ उत्पन्न हो सकती हैं कि अद्यतन टोकन या कुकी पुनः प्रयास किए गए अनुरोधों पर लागू हो। यदि नया टोकन सही ढंग से प्रचारित नहीं होता है, तो पुनः प्रयास विफल हो सकता है, जिससे उपयोगकर्ताओं को समान प्राधिकरण त्रुटि मिलेगी और संभावित रूप से ऐप वर्कफ़्लो बाधित हो सकता है।

इस गाइड में, हम इस इंटरसेप्टर पैटर्न के व्यावहारिक कार्यान्वयन के बारे में जानेंगे। हम देखेंगे कि त्रुटियों को कैसे पकड़ा जाए, टोकन को ताज़ा किया जाए और पुष्टि की जाए कि अनुरोध वैध प्राधिकरण के साथ पुनः प्रयास करें। यह दृष्टिकोण आपको सत्र नवीनीकरण प्रक्रिया पर नियंत्रण प्रदान करते हुए रुकावटों को कम करता है।

अंत तक, आपको सामान्य कमियों को दूर करने के बारे में जानकारी प्राप्त होगी, जैसे HttpOnly कुकीज़ को संभालना और उच्च अनुरोध मात्रा के दौरान ताज़ा अनुक्रमों को प्रबंधित करना। यह विधि सुनिश्चित करती है कि आपका एप्लिकेशन निरंतर लॉगिन के बिना एक सुरक्षित, सुचारू उपयोगकर्ता सत्र बनाए रख सकता है। 🔒

कोणीय इंटरसेप्टर के साथ विश्वसनीय JWT प्रमाणीकरण सुनिश्चित करना

उपरोक्त उदाहरण में, जब भी 401 त्रुटि सामने आती है तो इंटरसेप्टर को एक अल्पकालिक JWT टोकन को स्वचालित रूप से रीफ्रेश करने के लिए डिज़ाइन किया गया है। संवेदनशील डेटा वाले अनुप्रयोगों में इस प्रकार का सेटअप आवश्यक है, जहां सत्र सुरक्षा बनाए रखना महत्वपूर्ण है, लेकिन उपयोगकर्ता अनुभव बाधित नहीं होना चाहिए। इंटरसेप्टर 401 (अनधिकृत) त्रुटि पकड़ता है और उपयोगकर्ता को पुन: प्रमाणित करने की आवश्यकता के बिना सत्र को नवीनीकृत करने के लिए रीफ्रेश टोकन अनुरोध शुरू करता है। यह प्रक्रिया कैचएरर फ़ंक्शन द्वारा ट्रिगर की जाती है, जो एक अवलोकन योग्य पाइपलाइन के भीतर त्रुटि प्रबंधन की अनुमति देती है। यहां, कोई भी HTTP त्रुटि, विशेष रूप से 401, संकेत देती है कि टोकन संभवतः समाप्त हो गया है और ताज़ा करने की प्रक्रिया शुरू करता है।

स्विचमैप फ़ंक्शन यहां एक अन्य मुख्य तत्व है; यह ताज़ा अनुरोध के लिए एक नई अवलोकन योग्य धारा बनाता है, जो पूरे प्रवाह को रद्द किए बिना पुराने अवलोकन योग्य को प्रतिस्थापित करता है। ताज़ा करने के बाद, यह मूल अनुरोध को पुनः प्रयास करता है, यह सुनिश्चित करता है कि नया टोकन लागू किया गया है। पुराने अवलोकन योग्य से नए में स्विच करके, इंटरसेप्टर टोकन नवीनीकरण को निर्बाध, गैर-अवरुद्ध तरीके से कर सकता है। वास्तविक समय अनुप्रयोगों के साथ काम करते समय यह तकनीक विशेष रूप से मूल्यवान है, क्योंकि यह सुरक्षित प्रमाणीकरण बनाए रखते हुए उपयोगकर्ता इंटरैक्शन में रुकावटों को कम करती है। उदाहरण के लिए, एक सुरक्षित वित्तीय डैशबोर्ड ब्राउज़ करने वाले उपयोगकर्ता को अनावश्यक रूप से रीडायरेक्ट या लॉग आउट नहीं किया जाएगा; इसके बजाय, नया टोकन प्राप्त किया जाता है और पृष्ठभूमि में लागू किया जाता है। 🔄

इसके अतिरिक्त, BehaviorSubject ताज़ा प्रक्रिया की स्थिति को प्रबंधित करके एक महत्वपूर्ण भूमिका निभाता है। यह 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();
  });
});

एंगुलर इंटरसेप्टर्स के साथ जेडब्ल्यूटी टोकन रिफ्रेश रणनीतियों का विस्तार

एंगुलर का उपयोग करने का एक महत्वपूर्ण पहलू जेडब्ल्यूटी टोकन इंटरसेप्टर सुरक्षित अनुप्रयोगों के लिए प्रमाणीकरण और सत्र समाप्ति के प्रबंधन की जटिलताओं को कुशलतापूर्वक संभाल रहा है। केवल 401 त्रुटियों को पकड़ने और टोकन को ताज़ा करने के अलावा, बहु-अनुरोध प्रबंधन और टोकन ताज़ा को अनुकूलित करने के बारे में सोचना आवश्यक है। जब कई अनुरोधों में एक साथ 401 त्रुटि आती है, तो एक समय में केवल एक टोकन रीफ्रेश होता है यह सुनिश्चित करने के लिए कतार या लॉकिंग तंत्र को लागू करना बेहद उपयोगी हो सकता है। यह दृष्टिकोण अनावश्यक एपीआई कॉल को रोकता है और लोड को कम करता है, विशेष रूप से उच्च-ट्रैफ़िक अनुप्रयोगों में, जबकि सभी कतारबद्ध अनुरोधों को ताज़ा होने के बाद आगे बढ़ने की अनुमति देता है।

कोणीय इंटरसेप्टर हमें टोकन भंडारण और पुनर्प्राप्ति को संभालने के तरीके को सुव्यवस्थित करने की भी अनुमति देता है। स्थानीय भंडारण में हार्डकोडिंग टोकन के बजाय, एंगुलर का उपयोग करना सबसे अच्छा है Httpकेवल कुकीज़ और सुरक्षा बढ़ाने के लिए सीएसआरएफ सुरक्षा। HttpOnly कुकीज़ के साथ, JWT को जावास्क्रिप्ट द्वारा एक्सेस या हेरफेर नहीं किया जा सकता है, जिससे सुरक्षा में काफी सुधार होता है लेकिन एक नई चुनौती जुड़ती है: यह सुनिश्चित करना कि अनुरोध स्वचालित रूप से ताज़ा कुकी उठाते हैं। एंगुलर का अंतर्निर्मित withCredentials विकल्प एक समाधान है, जो ब्राउज़र को प्रत्येक अनुरोध पर इन कुकीज़ को शामिल करने का निर्देश देता है।

उत्पादन परिवेश में, टोकन रिफ्रेश के साथ लोड के तहत एप्लिकेशन कैसे व्यवहार करता है, इस पर प्रदर्शन परीक्षण चलाने की सलाह दी जाती है। परीक्षण सेटअप उच्च अनुरोध मात्रा का अनुकरण कर सकते हैं, यह सुनिश्चित करते हुए कि इंटरसेप्टर का तर्क कुशलतापूर्वक स्केल करता है। व्यवहार में, यह सेटअप उपयोगकर्ता अनुभव को प्रभावित करने वाली टोकन-संबंधी त्रुटियों के जोखिम को कम करता है। इंटरसेप्टर रणनीति, जब उचित कुकी हैंडलिंग और परीक्षण के साथ जोड़ी जाती है, तो एक सहज, उपयोगकर्ता के अनुकूल और सुरक्षित एप्लिकेशन बनाए रखने में मदद मिलती है - चाहे ऐप महत्वपूर्ण वित्तीय डेटा या सामाजिक प्लेटफ़ॉर्म के उपयोगकर्ता सत्रों का प्रबंधन करता हो। 🌐🔐