JWT రిఫ్రెష్ టోకెన్ హ్యాండ్లింగ్‌ని HttpInterceptorతో కోణీయంగా పరిష్కరిస్తోంది

కోణీయ ఇంటర్‌సెప్టర్‌లలో అతుకులు లేని JWT రిఫ్రెష్‌ని నిర్ధారించడం

సురక్షిత వినియోగదారు సెషన్‌లతో కూడిన వెబ్ యాప్‌లో, అంతరాయం లేని వినియోగదారు అనుభవానికి స్వల్పకాలిక JWT టోకెన్‌లను సమర్థవంతంగా నిర్వహించడం చాలా ముఖ్యం. టోకెన్‌ల గడువు ముగిసినప్పుడు, వినియోగదారులు మళ్లీ లాగిన్ చేయమని ఒత్తిడి చేయడం వంటి సమస్యలను తరచుగా ఎదుర్కొంటారు, ఇది నిరుత్సాహపరుస్తుంది మరియు వినియోగదారు నిశ్చితార్థానికి అంతరాయం కలిగించవచ్చు. దీన్ని పరిష్కరించడానికి, డెవలపర్‌లు సాధారణంగా గడువు ముగిసిన సెషన్‌లను నిర్వహించడానికి కోణీయ ఇంటర్‌సెప్టర్‌ని ఉపయోగించి ఆటోమేటిక్ టోకెన్ రిఫ్రెష్ని అమలు చేస్తారు. 🕰️

ఈ విధానంలో HTTP అభ్యర్థనలను అడ్డగించడం, 401 ఎర్రర్‌లు (అనధికార అభ్యర్థనలు) క్యాచ్ చేయడం, ఆపై కొత్త టోకెన్‌ను పొందేందుకు రిఫ్రెష్ ప్రాసెస్‌ను ప్రారంభించడం వంటివి ఉంటాయి. అయినప్పటికీ, మళ్లీ ప్రయత్నించిన అభ్యర్థనలకు నవీకరించబడిన టోకెన్ లేదా కుక్కీని వర్తింపజేయడంలో సమస్యలు తలెత్తవచ్చు. కొత్త టోకెన్ సరిగ్గా ప్రచారం చేయకపోతే, పునఃప్రయత్నం విఫలం కావచ్చు, దీని వలన వినియోగదారులు అదే అధికార లోపంతో ఉంటారు మరియు యాప్ వర్క్‌ఫ్లోలకు అంతరాయం కలిగించవచ్చు.

ఈ గైడ్‌లో, మేము ఈ ఇంటర్‌సెప్టర్ నమూనా యొక్క ఆచరణాత్మక అమలు ద్వారా నడుస్తాము. మేము ఎర్రర్‌లను ఎలా గుర్తించాలో, టోకెన్‌లను రిఫ్రెష్ చేయడం మరియు అభ్యర్థనలు చెల్లుబాటు అయ్యే అధికారంతో మళ్లీ ప్రయత్నిస్తాయని నిర్ధారించడం ఎలాగో పరిశీలిస్తాము. సెషన్ పునరుద్ధరణ ప్రక్రియపై మీకు నియంత్రణను అందించేటప్పుడు ఈ విధానం అంతరాయాలను తగ్గిస్తుంది.

చివరికి, మీరు HttpOnly కుక్కీలను నిర్వహించడం మరియు అధిక అభ్యర్థన వాల్యూమ్‌ల సమయంలో రిఫ్రెష్ సీక్వెన్స్‌లను నిర్వహించడం వంటి సాధారణ ఆపదలను ఎలా పరిష్కరించాలో అంతర్దృష్టులను పొందుతారు. స్థిరమైన లాగిన్‌లు లేకుండా మీ అప్లికేషన్ సురక్షితమైన, మృదువైన వినియోగదారు సెషన్‌ను నిర్వహించగలదని ఈ పద్ధతి నిర్ధారిస్తుంది. 🔒

కోణీయ ఇంటర్‌సెప్టర్‌లతో విశ్వసనీయమైన JWT ప్రమాణీకరణను నిర్ధారించడం

ఎగువ ఉదాహరణలో, ఇంటర్‌సెప్టర్ 401 ఎర్రర్ ఎదురైనప్పుడల్లా స్వల్పకాలిక JWT టోకెన్ని స్వయంచాలకంగా రిఫ్రెష్ చేయడానికి రూపొందించబడింది. సెన్సిటివ్ డేటా ఉన్న అప్లికేషన్‌లలో ఈ రకమైన సెటప్ అవసరం, ఇక్కడ సెషన్ భద్రతను నిర్వహించడం చాలా కీలకం, కానీ వినియోగదారు అనుభవానికి అంతరాయం కలిగించకూడదు. ఇంటర్‌సెప్టర్ 401 (అనధికార) ఎర్రర్‌ను క్యాచ్ చేస్తుంది మరియు వినియోగదారు మళ్లీ ప్రామాణీకరించాల్సిన అవసరం లేకుండా సెషన్‌ను పునరుద్ధరించడానికి రిఫ్రెష్ టోకెన్ అభ్యర్థనను ప్రారంభిస్తుంది. ఈ ప్రక్రియ క్యాచ్‌ఎర్రర్ ఫంక్షన్ ద్వారా ప్రేరేపించబడింది, ఇది పరిశీలించదగిన పైప్‌లైన్‌లో దోష నిర్వహణను అనుమతిస్తుంది. ఇక్కడ, ఏదైనా 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 కాల్‌లను నిరోధిస్తుంది మరియు లోడ్‌ను తగ్గిస్తుంది, ముఖ్యంగా అధిక-ట్రాఫిక్ అప్లికేషన్‌లలో, క్యూలో ఉన్న అన్ని అభ్యర్థనలను రిఫ్రెష్ చేసిన తర్వాత కొనసాగించడానికి అనుమతిస్తుంది.

కోణీయ ఇంటర్‌సెప్టర్లు కూడా మేము టోకెన్ స్టోరేజ్ మరియు రిట్రీవల్‌ని ఎలా నిర్వహించాలో క్రమబద్ధీకరించడానికి అనుమతిస్తాయి. స్థానిక నిల్వలో హార్డ్‌కోడింగ్ టోకెన్‌ల కంటే, కోణీయతను ఉపయోగించడం ఉత్తమం Httpకుకీలు మాత్రమే మరియు భద్రతను మెరుగుపరచడానికి CSRF రక్షణ. HttpOnly కుక్కీలతో, JWTని JavaScript ద్వారా యాక్సెస్ చేయడం లేదా మార్చడం సాధ్యం కాదు, భద్రతను బాగా మెరుగుపరుస్తుంది కానీ కొత్త సవాలును జోడిస్తుంది: అభ్యర్థనలు రిఫ్రెష్ చేయబడిన కుక్కీని స్వయంచాలకంగా ఎంచుకునేలా చూసుకోవడం. కోణీయ అంతర్నిర్మిత withCredentials ఎంపిక అనేది ఒక పరిష్కారం, ప్రతి అభ్యర్థనపై ఈ కుక్కీలను చేర్చమని బ్రౌజర్‌ని నిర్దేశిస్తుంది.

ఉత్పత్తి వాతావరణంలో, టోకెన్ రిఫ్రెష్‌లతో లోడ్‌లో అప్లికేషన్ ఎలా ప్రవర్తిస్తుందనే దానిపై పనితీరు పరీక్షలను అమలు చేయడం మంచిది. టెస్టింగ్ సెటప్‌లు అధిక అభ్యర్థన వాల్యూమ్‌లను అనుకరించగలవు, ఇంటర్‌సెప్టర్ యొక్క లాజిక్ స్కేల్ సమర్ధవంతంగా ఉండేలా చూస్తుంది. ఆచరణలో, ఈ సెటప్ వినియోగదారు అనుభవాన్ని ప్రభావితం చేసే టోకెన్-సంబంధిత ఎర్రర్‌ల ప్రమాదాన్ని తగ్గిస్తుంది. ఇంటర్‌సెప్టర్ స్ట్రాటజీ, సరైన కుక్కీ హ్యాండ్లింగ్ మరియు టెస్టింగ్‌తో జత చేసినప్పుడు, అతుకులు లేని, యూజర్ ఫ్రెండ్లీ మరియు సురక్షితమైన అప్లికేషన్‌ను నిర్వహించడంలో సహాయపడుతుంది—యాప్ కీలకమైన ఆర్థిక డేటా లేదా సోషల్ ప్లాట్‌ఫారమ్ యూజర్ సెషన్‌లను మేనేజ్ చేసినా. 🌐🔐