HttpInterceptor સાથે કોણીયમાં JWT રિફ્રેશ ટોકન હેન્ડલિંગનું નિરાકરણ

કોણીય ઇન્ટરસેપ્ટર્સમાં સીમલેસ JWT રિફ્રેશની ખાતરી કરવી

સુરક્ષિત વપરાશકર્તા સત્રો સાથેની વેબ એપ્લિકેશનમાં, અવિરત વપરાશકર્તા અનુભવ માટે અસરકારક રીતે ટૂંકા ગાળાના JWT ટોકન્સનું સંચાલન કરવું મહત્વપૂર્ણ છે. જ્યારે ટોકન્સની સમયસીમા સમાપ્ત થાય છે, ત્યારે વપરાશકર્તાઓ વારંવાર ફરીથી લૉગિન કરવા માટે દબાણ કરવા જેવી સમસ્યાઓનો સામનો કરે છે, જે નિરાશાજનક હોઈ શકે છે અને વપરાશકર્તાની સંલગ્નતાને વિક્ષેપિત કરી શકે છે. આનો સામનો કરવા માટે, વિકાસકર્તાઓ સામાન્ય રીતે સમાપ્ત થયેલા સત્રોને હેન્ડલ કરવા માટે કોણીય ઇન્ટરસેપ્ટરનો ઉપયોગ કરીને ઓટોમેટિક ટોકન રિફ્રેશ લાગુ કરે છે. 🕰️

આ અભિગમમાં HTTP વિનંતીઓને અટકાવવી, 401 ભૂલો (અનધિકૃત વિનંતીઓ) પકડવી અને પછી નવું ટોકન મેળવવા માટે રીફ્રેશ પ્રક્રિયાનો સમાવેશ થાય છે. જો કે, પુનઃપ્રયાસ કરેલી વિનંતીઓ પર અપડેટ કરેલ ટોકન અથવા કૂકી લાગુ કરવામાં આવે તેની ખાતરી કરવામાં સમસ્યાઓ ઊભી થઈ શકે છે. જો નવું ટોકન યોગ્ય રીતે પ્રચાર કરતું નથી, તો ફરીથી પ્રયાસ નિષ્ફળ થઈ શકે છે, વપરાશકર્તાઓને સમાન અધિકૃતતા ભૂલ અને સંભવિત રીતે એપ્લિકેશન વર્કફ્લોમાં વિક્ષેપ આવે છે.

આ માર્ગદર્શિકામાં, અમે આ ઇન્ટરસેપ્ટર પેટર્નના વ્યવહારિક અમલીકરણમાંથી પસાર થઈશું. અમે ભૂલો કેવી રીતે પકડવી, ટોકન્સ રિફ્રેશ કરવા અને માન્ય અધિકૃતતા સાથે વિનંતીઓ ફરી પ્રયાસ કરવાની પુષ્ટિ કરીશું તે જોઈશું. આ અભિગમ તમને સત્ર નવીકરણ પ્રક્રિયા પર નિયંત્રણ આપતી વખતે વિક્ષેપોને ઘટાડે છે.

અંત સુધીમાં, તમે HttpOnly કૂકીઝને હેન્ડલ કરવા અને ઉચ્ચ વિનંતી વોલ્યુમો દરમિયાન રિફ્રેશ સિક્વન્સનું સંચાલન કરવા જેવી સામાન્ય મુશ્કેલીઓને કેવી રીતે સંબોધિત કરવી તે અંગે આંતરદૃષ્ટિ મેળવશો. આ પદ્ધતિ ખાતરી કરે છે કે તમારી એપ્લિકેશન સતત લૉગિન વિના સુરક્ષિત, સરળ વપરાશકર્તા સત્ર જાળવી શકે છે. 🔒

કોણીય ઇન્ટરસેપ્ટર્સ સાથે વિશ્વસનીય JWT પ્રમાણીકરણની ખાતરી કરવી

ઉપરના ઉદાહરણમાં, જ્યારે પણ 401 ભૂલનો સામનો કરવો પડે ત્યારે ઇન્ટરસેપ્ટર ટૂંકા ગાળાના JWT ટોકનને આપમેળે તાજું કરવા માટે રચાયેલ છે. સંવેદનશીલ ડેટા ધરાવતી એપ્લિકેશન્સમાં આ પ્રકારનું સેટઅપ આવશ્યક છે, જ્યાં સત્ર સુરક્ષા જાળવવી મહત્વપૂર્ણ છે, પરંતુ વપરાશકર્તા અનુભવમાં વિક્ષેપ ન થવો જોઈએ. ઇન્ટરસેપ્ટર 401 (અનધિકૃત) ભૂલને પકડે છે અને વપરાશકર્તાને પુનઃપ્રમાણિત કરવાની જરૂર વગર સત્રને રિન્યૂ કરવા માટે રિફ્રેશ ટોકન વિનંતી શરૂ કરે છે. આ પ્રક્રિયા catchError ફંક્શન દ્વારા ટ્રિગર થાય છે, જે અવલોકનક્ષમ પાઇપલાઇનની અંદર ભૂલને હેન્ડલિંગ કરવાની મંજૂરી આપે છે. અહીં, કોઈપણ HTTP ભૂલ, ખાસ કરીને 401, સંકેત આપે છે કે ટોકનની સમયસીમા સમાપ્ત થઈ ગઈ છે અને તે તાજગી પ્રક્રિયા શરૂ કરે છે.

switchMap ફંક્શન એ અહીંનું બીજું મુખ્ય તત્વ છે; તે સમગ્ર પ્રવાહને રદ કર્યા વિના જૂના અવલોકનક્ષમને બદલીને, તાજી વિનંતી માટે એક નવો અવલોકનક્ષમ પ્રવાહ બનાવે છે. તાજું કર્યા પછી, તે મૂળ વિનંતીનો ફરીથી પ્રયાસ કરે છે, તેની ખાતરી કરીને કે નવું ટોકન લાગુ થયું છે. જૂના અવલોકનક્ષમથી નવામાં સ્વિચ કરીને, ઇન્ટરસેપ્ટર ટોકન નવીકરણને સીમલેસ, બિન-અવરોધિત રીતે કરી શકે છે. રીઅલ-ટાઇમ એપ્લિકેશન્સ સાથે કામ કરતી વખતે આ તકનીક ખાસ કરીને મૂલ્યવાન છે, કારણ કે તે સુરક્ષિત પ્રમાણીકરણ જાળવી રાખતી વખતે વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓમાં વિક્ષેપો ઘટાડે છે. દાખલા તરીકે, સુરક્ષિત નાણાકીય ડેશબોર્ડ બ્રાઉઝ કરી રહેલા વપરાશકર્તાને રીડાયરેક્ટ કરવામાં આવશે નહીં અથવા બિનજરૂરી રીતે લૉગ આઉટ કરવામાં આવશે નહીં; તેના બદલે, નવું ટોકન હસ્તગત કરવામાં આવે છે અને પૃષ્ઠભૂમિમાં લાગુ કરવામાં આવે છે. 🔄

વધુમાં, બિહેવિયર સબ્જેક્ટ રિફ્રેશ પ્રક્રિયાની સ્થિતિનું સંચાલન કરીને નિર્ણાયક ભૂમિકા ભજવે છે. આ 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();
  });
});

કોણીય ઇન્ટરસેપ્ટર્સ સાથે JWT ટોકન રિફ્રેશ વ્યૂહરચનાઓનું વિસ્તરણ

કોણીયનો ઉપયોગ કરવાનું નિર્ણાયક પાસું JWT ટોકન ઇન્ટરસેપ્ટર સુરક્ષિત એપ્લિકેશનો માટે પ્રમાણીકરણ અને સત્ર સમાપ્તિ વ્યવસ્થાપનની જટિલતાઓને અસરકારક રીતે સંભાળી રહી છે. માત્ર 401 ભૂલો પકડવા અને ટોકન્સ રિફ્રેશ કરવા ઉપરાંત, બહુ-વિનંતી હેન્ડલિંગ અને ટોકન રિફ્રેશને કેવી રીતે ઑપ્ટિમાઇઝ કરવું તે વિશે વિચારવું આવશ્યક છે. જ્યારે બહુવિધ વિનંતીઓ એકસાથે 401 ભૂલનો સામનો કરે છે, ત્યારે એક સમયે માત્ર એક ટોકન રિફ્રેશ થાય તેની ખાતરી કરવા માટે કતાર અથવા લોકીંગ મિકેનિઝમનો અમલ કરવો અત્યંત ઉપયોગી બની શકે છે. આ અભિગમ બિનજરૂરી API કૉલ્સને અટકાવે છે અને લોડ ઘટાડે છે, ખાસ કરીને ઉચ્ચ-ટ્રાફિક એપ્લિકેશન્સમાં, જ્યારે બધી કતારબદ્ધ વિનંતીઓને રિફ્રેશ કર્યા પછી આગળ વધવાની મંજૂરી આપે છે.

કોણીય ઇન્ટરસેપ્ટર અમને ટોકન સ્ટોરેજ અને પુનઃપ્રાપ્તિને કેવી રીતે હેન્ડલ કરીએ છીએ તે સુવ્યવસ્થિત કરવાની પણ મંજૂરી આપે છે. સ્થાનિક સ્ટોરેજમાં હાર્ડકોડ ટોકન્સને બદલે, કોણીયનો ઉપયોગ કરવો શ્રેષ્ઠ છે ફક્ત Http કૂકીઝ અને સુરક્ષા વધારવા માટે CSRF સુરક્ષા. HttpOnly કૂકીઝ સાથે, JWT ને JavaScript દ્વારા એક્સેસ કરી શકાતું નથી અથવા તેની સાથે ચાલાકી કરી શકાતી નથી, જે સુરક્ષામાં ઘણો સુધારો કરે છે પરંતુ એક નવો પડકાર ઉમેરે છે: ખાતરી કરવી કે વિનંતીઓ આપમેળે રિફ્રેશ કરેલી કૂકીને પસંદ કરે છે. કોણીય બિલ્ટ-ઇન છે withCredentials વિકલ્પ એ ઉકેલ છે, બ્રાઉઝરને દરેક વિનંતી પર આ કૂકીઝનો સમાવેશ કરવાની સૂચના આપે છે.

પ્રોડક્શન એન્વાયર્નમેન્ટમાં, ટોકન રિફ્રેશ સાથે એપ્લિકેશન લોડ હેઠળ કેવી રીતે વર્તે છે તેના પર પ્રદર્શન પરીક્ષણો ચલાવવાની સલાહ આપવામાં આવે છે. પરીક્ષણ સેટઅપ ઉચ્ચ વિનંતી વોલ્યુમોનું અનુકરણ કરી શકે છે, તેની ખાતરી કરીને કે ઇન્ટરસેપ્ટરનું તર્ક કાર્યક્ષમ રીતે સ્કેલ કરે છે. વ્યવહારમાં, આ સેટઅપ વપરાશકર્તા અનુભવને અસર કરતી ટોકન-સંબંધિત ભૂલોના જોખમને ઘટાડે છે. ઇન્ટરસેપ્ટર વ્યૂહરચના, જ્યારે યોગ્ય કૂકી હેન્ડલિંગ અને પરીક્ષણ સાથે જોડી બનાવવામાં આવે છે, ત્યારે તે એક સીમલેસ, વપરાશકર્તા-મૈત્રીપૂર્ણ અને સુરક્ષિત એપ્લિકેશનને જાળવવામાં મદદ કરે છે - પછી ભલે એપ્લિકેશન નિર્ણાયક નાણાકીય ડેટા અથવા સામાજિક પ્લેટફોર્મના વપરાશકર્તા સત્રોનું સંચાલન કરે. 🌐🔐