HttpInterceptor உடன் கோணத்தில் JWT புதுப்பிப்பு டோக்கன் கையாளுதலைத் தீர்க்கிறது

கோண இடைமறிப்பாளர்களில் தடையற்ற JWT புதுப்பிப்பை உறுதி செய்தல்

பாதுகாப்பான பயனர் அமர்வுகளைக் கொண்ட இணையப் பயன்பாட்டில், குறுகிய கால JWT டோக்கன்களை திறம்பட நிர்வகிப்பது தடையற்ற பயனர் அனுபவத்திற்கு முக்கியமானது. டோக்கன்கள் காலாவதியாகும் போது, ​​பயனர்கள் மீண்டும் உள்நுழைய நிர்பந்திக்கப்படுவது போன்ற சிக்கல்களை அடிக்கடி எதிர்கொள்கின்றனர், இது ஏமாற்றமளிக்கும் மற்றும் பயனர் ஈடுபாட்டை சீர்குலைக்கும். இதைச் சமாளிக்க, டெவலப்பர்கள் பொதுவாக தானியங்கி டோக்கன் புதுப்பிப்பை காலாவதியான அமர்வுகளைக் கையாள கோண இடைமறிப்பாளரைப் பயன்படுத்தி செயல்படுத்துகின்றனர். 🕰️

இந்த அணுகுமுறையானது HTTP கோரிக்கைகளை இடைமறிப்பது, 401 பிழைகள் (அங்கீகரிக்கப்படாத கோரிக்கைகள்) ஆகியவற்றைப் பிடித்து, பின்னர் புதிய டோக்கனைப் பெற புதுப்பித்தல் செயல்முறையைத் தூண்டுகிறது. இருப்பினும், புதுப்பிக்கப்பட்ட டோக்கன் அல்லது குக்கீ மறு முயற்சி கோரிக்கைகளுக்குப் பயன்படுத்தப்படுவதை உறுதி செய்வதில் சிக்கல்கள் எழலாம். புதிய டோக்கன் சரியாகப் பிரசாரம் செய்யவில்லை என்றால், மறுமுயற்சி தோல்வியடையக்கூடும், இதனால் பயனர்களுக்கு அதே அங்கீகாரப் பிழை ஏற்பட்டு, ஆப்ஸ் பணிப்பாய்வுகளுக்கு இடையூறு விளைவிக்கும்.

இந்த வழிகாட்டியில், இந்த இன்டர்செப்டர் பேட்டர்னை நடைமுறைப்படுத்துவதன் மூலம் நடப்போம். பிழைகளை எவ்வாறு கண்டறிவது, டோக்கன்களைப் புதுப்பித்தல் மற்றும் கோரிக்கைகள் சரியான அங்கீகாரத்துடன் மீண்டும் முயற்சி செய்யப்படுகின்றன என்பதை உறுதிப்படுத்துவது எப்படி என்பதைப் பார்ப்போம். அமர்வு புதுப்பித்தல் செயல்முறையின் மீதான கட்டுப்பாட்டை உங்களுக்கு வழங்கும் போது இந்த அணுகுமுறை குறுக்கீடுகளைக் குறைக்கிறது.

முடிவில், HttpOnly குக்கீகளை கையாளுதல் மற்றும் அதிக கோரிக்கை அளவுகளின் போது புதுப்பிப்பு காட்சிகளை நிர்வகித்தல் போன்ற பொதுவான குறைபாடுகளை எவ்வாறு நிவர்த்தி செய்வது என்பது பற்றிய நுண்ணறிவுகளைப் பெறுவீர்கள். நிலையான உள்நுழைவுகள் இல்லாமல் உங்கள் பயன்பாடு பாதுகாப்பான, மென்மையான பயனர் அமர்வை பராமரிக்க முடியும் என்பதை இந்த முறை உறுதி செய்கிறது. 🔒

கோண இடைமறிப்பான்களுடன் நம்பகமான JWT அங்கீகாரத்தை உறுதி செய்தல்

மேலே உள்ள எடுத்துக்காட்டில், 401 பிழை ஏற்பட்டால், இடைமறிப்பான் குறுகிய கால JWT டோக்கனை தானாகவே புதுப்பிக்க வடிவமைக்கப்பட்டுள்ளது. முக்கியமான தரவுகளைக் கொண்ட பயன்பாடுகளில் இந்த வகையான அமைவு அவசியமானது, அங்கு அமர்வு பாதுகாப்பைப் பராமரிப்பது மிகவும் முக்கியமானது, ஆனால் பயனர் அனுபவம் குறுக்கிடப்படக்கூடாது. இடைமறிப்பான் 401 (அங்கீகரிக்கப்படாத) பிழையைப் பிடித்து, பயனர் மீண்டும் அங்கீகரிக்க வேண்டிய அவசியமின்றி அமர்வைப் புதுப்பிக்க புதுப்பிப்பு டோக்கன் கோரிக்கையைத் தொடங்குகிறது. இந்த செயல்முறையானது கேட்ச்எரர் செயல்பாட்டால் தூண்டப்படுகிறது, இது கவனிக்கக்கூடிய பைப்லைனுக்குள் பிழையைக் கையாள அனுமதிக்கிறது. இங்கே, எந்த 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 ஐ ஜாவாஸ்கிரிப்ட் மூலம் அணுகவோ அல்லது கையாளவோ முடியாது, இது பாதுகாப்பை பெரிதும் மேம்படுத்துகிறது, ஆனால் ஒரு புதிய சவாலைச் சேர்க்கிறது: கோரிக்கைகள் புதுப்பிக்கப்பட்ட குக்கீயை தானாகவே எடுப்பதை உறுதி செய்கிறது. கோணத்தின் உள்ளமைவு withCredentials விருப்பம் ஒரு தீர்வாகும், ஒவ்வொரு கோரிக்கையிலும் இந்த குக்கீகளைச் சேர்க்க உலாவிக்கு அறிவுறுத்துகிறது.

உற்பத்திச் சூழலில், டோக்கன் புதுப்பிப்புகளுடன் பயன்பாடு சுமையின் கீழ் எவ்வாறு செயல்படுகிறது என்பதைப் பற்றிய செயல்திறன் சோதனைகளை இயக்குவது நல்லது. சோதனை அமைப்புகள் அதிக கோரிக்கை அளவுகளை உருவகப்படுத்தலாம், இடைமறிப்பாளரின் தர்க்க அளவுகோல் திறமையாக இருப்பதை உறுதி செய்கிறது. நடைமுறையில், இந்த அமைப்பு பயனர் அனுபவத்தை பாதிக்கும் டோக்கன் தொடர்பான பிழைகளின் அபாயத்தைக் குறைக்கிறது. இடைமறிப்பு உத்தி, சரியான குக்கீ கையாளுதல் மற்றும் சோதனையுடன் இணைக்கப்படும்போது, ​​ஒரு தடையற்ற, பயனர் நட்பு மற்றும் பாதுகாப்பான பயன்பாட்டைப் பராமரிக்க உதவுகிறது—ஆப்ஸ் முக்கியமான நிதித் தரவை அல்லது சமூக தளத்தின் பயனர் அமர்வுகளை நிர்வகிக்கிறது. 🌐🔐