HttpInterceptor ഉപയോഗിച്ച് കോണീയത്തിൽ JWT പുതുക്കിയ ടോക്കൺ കൈകാര്യം ചെയ്യൽ പരിഹരിക്കുന്നു

കോണീയ ഇൻ്റർസെപ്റ്ററുകളിൽ തടസ്സമില്ലാത്ത JWT പുതുക്കൽ ഉറപ്പാക്കുന്നു

സുരക്ഷിതമായ ഉപയോക്തൃ സെഷനുകളുള്ള ഒരു വെബ് ആപ്പിൽ, ഹ്രസ്വകാല JWT ടോക്കണുകൾ ഫലപ്രദമായി കൈകാര്യം ചെയ്യുന്നത് തടസ്സമില്ലാത്ത ഉപയോക്തൃ അനുഭവത്തിന് നിർണായകമാണ്. ടോക്കണുകൾ കാലഹരണപ്പെടുമ്പോൾ, ഉപയോക്താക്കൾ വീണ്ടും ലോഗിൻ ചെയ്യാൻ നിർബന്ധിതരാകുന്നത് പോലുള്ള പ്രശ്നങ്ങൾ പലപ്പോഴും നേരിടേണ്ടിവരുന്നു, ഇത് നിരാശാജനകവും ഉപയോക്തൃ ഇടപഴകലിനെ തടസ്സപ്പെടുത്തുന്നതുമാണ്. ഇത് പരിഹരിക്കുന്നതിന്, കാലഹരണപ്പെട്ട സെഷനുകൾ കൈകാര്യം ചെയ്യുന്നതിനായി ഡെവലപ്പർമാർ സാധാരണയായി ഓട്ടോമാറ്റിക് ടോക്കൺ പുതുക്കൽ ഒരു കോണീയ ഇൻ്റർസെപ്റ്റർ ഉപയോഗിച്ച് നടപ്പിലാക്കുന്നു. 🕰️

ഈ സമീപനത്തിൽ HTTP അഭ്യർത്ഥനകൾ തടസ്സപ്പെടുത്തൽ, 401 പിശകുകൾ (അനധികൃത അഭ്യർത്ഥനകൾ) പിടിക്കൽ, തുടർന്ന് ഒരു പുതിയ ടോക്കൺ ലഭിക്കുന്നതിന് ഒരു പുതുക്കൽ പ്രക്രിയ എന്നിവ ഉൾപ്പെടുന്നു. എന്നിരുന്നാലും, വീണ്ടും ശ്രമിച്ച അഭ്യർത്ഥനകൾക്ക് അപ്‌ഡേറ്റ് ചെയ്‌ത ടോക്കൺ അല്ലെങ്കിൽ കുക്കി പ്രയോഗിക്കുന്നത് ഉറപ്പാക്കുന്നതിൽ പ്രശ്‌നങ്ങൾ ഉണ്ടാകാം. പുതിയ ടോക്കൺ ശരിയായി പ്രചരിപ്പിക്കുന്നില്ലെങ്കിൽ, വീണ്ടും ശ്രമം പരാജയപ്പെടാം, ഇത് ഉപയോക്താക്കൾക്ക് അതേ അംഗീകാര പിശക് നൽകുകയും ആപ്പ് വർക്ക്ഫ്ലോകളെ തടസ്സപ്പെടുത്തുകയും ചെയ്യും.

ഈ ഗൈഡിൽ, ഈ ഇൻ്റർസെപ്റ്റർ പാറ്റേണിൻ്റെ ഒരു പ്രായോഗിക നിർവ്വഹണത്തിലൂടെ ഞങ്ങൾ സഞ്ചരിക്കും. പിശകുകൾ എങ്ങനെ കണ്ടെത്താമെന്നും ടോക്കണുകൾ പുതുക്കിയെടുക്കാമെന്നും അഭ്യർത്ഥനകൾ സാധുവായ അംഗീകാരത്തോടെ വീണ്ടും ശ്രമിക്കുന്നുവെന്ന് സ്ഥിരീകരിക്കുന്നത് എങ്ങനെയെന്ന് ഞങ്ങൾ നോക്കും. സെഷൻ പുതുക്കൽ പ്രക്രിയയിൽ നിങ്ങൾക്ക് നിയന്ത്രണം നൽകുമ്പോൾ ഈ സമീപനം തടസ്സങ്ങൾ കുറയ്ക്കുന്നു.

അവസാനത്തോടെ, Http മാത്രം കുക്കികൾ കൈകാര്യം ചെയ്യലും ഉയർന്ന അഭ്യർത്ഥന വോള്യങ്ങളിൽ പുതുക്കിയ ക്രമങ്ങൾ കൈകാര്യം ചെയ്യലും പോലെയുള്ള പൊതുവായ പോരായ്മകൾ എങ്ങനെ പരിഹരിക്കാമെന്നതിനെക്കുറിച്ചുള്ള ഉൾക്കാഴ്‌ചകൾ നിങ്ങൾക്ക് ലഭിക്കും. സ്ഥിരമായ ലോഗിനുകളില്ലാതെ നിങ്ങളുടെ അപ്ലിക്കേഷന് സുരക്ഷിതവും സുഗമവുമായ ഉപയോക്തൃ സെഷൻ നിലനിർത്താൻ കഴിയുമെന്ന് ഈ രീതി ഉറപ്പാക്കുന്നു. 🔒

കോണീയ ഇൻ്റർസെപ്റ്ററുകൾ ഉപയോഗിച്ച് വിശ്വസനീയമായ JWT പ്രാമാണീകരണം ഉറപ്പാക്കുന്നു

മുകളിലെ ഉദാഹരണത്തിൽ, 401 പിശക് നേരിടുമ്പോഴെല്ലാം ഒരു ഹ്രസ്വകാല JWT ടോക്കൺ യാന്ത്രികമായി പുതുക്കുന്നതിന് ഇൻ്റർസെപ്റ്റർ രൂപകൽപ്പന ചെയ്‌തിരിക്കുന്നു. സെൻസിറ്റീവ് ഡാറ്റയുള്ള ആപ്ലിക്കേഷനുകളിൽ ഇത്തരത്തിലുള്ള സജ്ജീകരണം അത്യന്താപേക്ഷിതമാണ്, ഇവിടെ സെഷൻ സുരക്ഷ നിലനിർത്തുന്നത് നിർണായകമാണ്, എന്നാൽ ഉപയോക്തൃ അനുഭവം തടസ്സപ്പെടാൻ പാടില്ല. ഇൻ്റർസെപ്റ്റർ 401 (അനധികൃത) പിശക് പിടിക്കുകയും ഉപയോക്താവ് വീണ്ടും പ്രാമാണീകരിക്കേണ്ട ആവശ്യമില്ലാതെ സെഷൻ പുതുക്കുന്നതിന് ഒരു പുതുക്കൽ ടോക്കൺ അഭ്യർത്ഥന ആരംഭിക്കുകയും ചെയ്യുന്നു. നിരീക്ഷിക്കാവുന്ന പൈപ്പ്ലൈനിനുള്ളിൽ പിശക് കൈകാര്യം ചെയ്യാൻ അനുവദിക്കുന്ന ക്യാച്ച്എറർ ഫംഗ്ഷനാണ് ഈ പ്രക്രിയ ട്രിഗർ ചെയ്യുന്നത്. ഇവിടെ, ഏതെങ്കിലും HTTP പിശക്, പ്രത്യേകിച്ച് ഒരു 401, ടോക്കൺ കാലഹരണപ്പെടാൻ സാധ്യതയുണ്ടെന്ന് സൂചന നൽകുകയും പുതുക്കൽ പ്രക്രിയ ആരംഭിക്കുകയും ചെയ്യുന്നു.

സ്വിച്ച്മാപ്പ് ഫംഗ്‌ഷൻ ഇവിടെയുള്ള മറ്റൊരു പ്രധാന ഘടകമാണ്; പുതുക്കിയ അഭ്യർത്ഥനയ്‌ക്കായി ഇത് ഒരു പുതിയ നിരീക്ഷിക്കാവുന്ന സ്ട്രീം സൃഷ്‌ടിക്കുന്നു, മുഴുവൻ ഫ്ലോയും റദ്ദാക്കാതെ പഴയ നിരീക്ഷണത്തിന് പകരമായി. പുതുക്കിയ ശേഷം, പുതിയ ടോക്കൺ പ്രയോഗിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കിക്കൊണ്ട് യഥാർത്ഥ അഭ്യർത്ഥന വീണ്ടും ശ്രമിക്കുന്നു. പഴയ നിരീക്ഷണത്തിൽ നിന്ന് പുതിയതിലേക്ക് മാറുന്നതിലൂടെ, തടസ്സമില്ലാത്ത, തടസ്സമില്ലാത്ത രീതിയിൽ ടോക്കൺ പുതുക്കൽ ഇൻ്റർസെപ്റ്ററിന് ചെയ്യാൻ കഴിയും. തത്സമയ ആപ്ലിക്കേഷനുകൾക്കൊപ്പം പ്രവർത്തിക്കുമ്പോൾ ഈ സാങ്കേതികവിദ്യ പ്രത്യേകിച്ചും വിലപ്പെട്ടതാണ്, കാരണം സുരക്ഷിതമായ ആധികാരികത നിലനിർത്തിക്കൊണ്ടുതന്നെ ഉപയോക്തൃ ഇടപെടലുകളിലെ തടസ്സങ്ങൾ ഇത് കുറയ്ക്കുന്നു. ഉദാഹരണത്തിന്, സുരക്ഷിതമായ ഫിനാൻഷ്യൽ ഡാഷ്‌ബോർഡ് ബ്രൗസ് ചെയ്യുന്ന ഒരു ഉപയോക്താവിനെ റീഡയറക്‌ട് ചെയ്യുകയോ അനാവശ്യമായി ലോഗ് ഔട്ട് ചെയ്യുകയോ ചെയ്യില്ല; പകരം, പുതിയ ടോക്കൺ ഏറ്റെടുക്കുകയും പശ്ചാത്തലത്തിൽ പ്രയോഗിക്കുകയും ചെയ്യുന്നു. 🔄

കൂടാതെ, പുതുക്കൽ പ്രക്രിയയുടെ അവസ്ഥ കൈകാര്യം ചെയ്യുന്നതിലൂടെ പെരുമാറ്റ വിഷയം നിർണായക പങ്ക് വഹിക്കുന്നു. ഈ RxJS യൂട്ടിലിറ്റിക്ക് അവസാനം പുറപ്പെടുവിച്ച മൂല്യം നിലനിർത്താൻ കഴിയും, ഒന്നിലധികം അഭ്യർത്ഥനകൾ ഒരേ സമയം 401 പിശക് നേരിടുമ്പോൾ ഇത് പ്രത്യേകിച്ചും സഹായകരമാണ്. ഒന്നിലധികം പുതുക്കലുകൾ ട്രിഗർ ചെയ്യുന്നതിനുപകരം, ഇൻ്റർസെപ്റ്റർ ഒരു ടോക്കൺ പുതുക്കൽ മാത്രമേ ആരംഭിക്കൂ, കൂടാതെ ഈ ഒരൊറ്റ ടോക്കൺ പുതുക്കലിനായി കാത്തിരിക്കാൻ മറ്റെല്ലാ അഭ്യർത്ഥനകളും ക്യൂവിലാണ്. സ്വിച്ച്മാപ്പിനൊപ്പം 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 പിശക് നേരിടുമ്പോൾ, ഒരു ക്യൂ അല്ലെങ്കിൽ ലോക്കിംഗ് സംവിധാനം നടപ്പിലാക്കുന്നത് ഒരു സമയം ഒരു ടോക്കൺ പുതുക്കൽ മാത്രമേ നടക്കുന്നുള്ളൂവെന്ന് ഉറപ്പാക്കാൻ വളരെ ഉപയോഗപ്രദമാകും. ഈ സമീപനം അനാവശ്യ എപിഐ കോളുകൾ തടയുകയും ലോഡ് കുറയ്ക്കുകയും ചെയ്യുന്നു, പ്രത്യേകിച്ചും ഉയർന്ന ട്രാഫിക്കുള്ള ആപ്ലിക്കേഷനുകളിൽ, ക്യൂവിലുള്ള എല്ലാ അഭ്യർത്ഥനകളും പുതുക്കിയതിന് ശേഷം തുടരാൻ അനുവദിക്കുന്നു.

ടോക്കൺ സംഭരണവും വീണ്ടെടുക്കലും ഞങ്ങൾ എങ്ങനെ കൈകാര്യം ചെയ്യുന്നു എന്നതിനെ കാര്യക്ഷമമാക്കാനും ആംഗുലറിൻ്റെ ഇൻ്റർസെപ്റ്ററുകൾ ഞങ്ങളെ അനുവദിക്കുന്നു. ലോക്കൽ സ്റ്റോറേജിൽ ഹാർഡ്‌കോഡിംഗ് ടോക്കണുകൾക്ക് പകരം, ആംഗുലാർ ഉപയോഗിക്കുന്നതാണ് നല്ലത് Http മാത്രം കുക്കികൾ സുരക്ഷ വർധിപ്പിക്കാൻ CSRF സംരക്ഷണവും. HttpOnly കുക്കികൾ ഉപയോഗിച്ച്, JavaScript-ന് JWT ആക്‌സസ് ചെയ്യാനോ കൈകാര്യം ചെയ്യാനോ കഴിയില്ല, ഇത് സുരക്ഷ വളരെയധികം മെച്ചപ്പെടുത്തുന്നു, പക്ഷേ ഒരു പുതിയ വെല്ലുവിളി ചേർക്കുന്നു: അഭ്യർത്ഥനകൾ പുതുക്കിയ കുക്കി സ്വയമേവ എടുക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. ആംഗുലറിൻ്റെ ബിൽറ്റ്-ഇൻ withCredentials ഓപ്ഷൻ ഒരു പരിഹാരമാണ്, ഓരോ അഭ്യർത്ഥനയിലും ഈ കുക്കികൾ ഉൾപ്പെടുത്താൻ ബ്രൗസറിന് നിർദ്ദേശം നൽകുന്നു.

ഒരു പ്രൊഡക്ഷൻ പരിതസ്ഥിതിയിൽ, ടോക്കൺ പുതുക്കലിനൊപ്പം ലോഡിന് കീഴിൽ ആപ്ലിക്കേഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെക്കുറിച്ചുള്ള പ്രകടന പരിശോധനകൾ നടത്തുന്നത് ഉചിതമാണ്. ടെസ്റ്റിംഗ് സജ്ജീകരണങ്ങൾക്ക് ഉയർന്ന അഭ്യർത്ഥന വോള്യങ്ങൾ അനുകരിക്കാൻ കഴിയും, ഇത് ഇൻ്റർസെപ്റ്ററിൻ്റെ ലോജിക് സ്കെയിലുകൾ കാര്യക്ഷമമായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു. പ്രായോഗികമായി, ഈ സജ്ജീകരണം ഉപയോക്തൃ അനുഭവത്തെ ബാധിക്കുന്ന ടോക്കണുമായി ബന്ധപ്പെട്ട പിശകുകളുടെ അപകടസാധ്യത കുറയ്ക്കുന്നു. ഇൻറർസെപ്റ്റർ സ്ട്രാറ്റജി, ശരിയായ കുക്കി കൈകാര്യം ചെയ്യലും ടെസ്റ്റിംഗുമായി ജോടിയാക്കുമ്പോൾ, തടസ്സമില്ലാത്തതും ഉപയോക്തൃ-സൗഹൃദവും സുരക്ഷിതവുമായ ഒരു ആപ്ലിക്കേഷൻ നിലനിർത്താൻ സഹായിക്കുന്നു-ആപ്പ് നിർണായക സാമ്പത്തിക ഡാറ്റയോ സോഷ്യൽ പ്ലാറ്റ്‌ഫോമിൻ്റെ ഉപയോക്തൃ സെഷനുകളോ കൈകാര്യം ചെയ്യുന്നു. 🌐🔐