typescript - Sende JWT-token med Angular Service Worker
For en Angular 7-app jeg utvikler, bruker jeg en HttpInterceptor for å sende tokenet med hver forespørsel. Det ser omtrent slik ut:
export class JwtInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let currentUser = JSON.parse(localStorage.getItem('currentUser'));
if (currentUser && currentUser.token) {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${currentUser.token}`
}
});
}
return next.handle(request);
}
For å gjøre denne appen om til en progressiv webapp bruker jeg @angular/service-worker og @angular/pwa. Konfigurasjonen er ikke vanskelig, så jeg trodde det skulle fungere. Men problemet er at jeg ikke finner en måte å utvide denne workeren med alltid å sende tokenet med hver forespørsel. Jeg vet at localstorage ikke er tilgjengelig i workeren, men det er ikke problemet akkurat nå. Jeg må først finne en måte som HttpInterceptor fungerer nå. Finnes det en standardløsning på dette problemet?
Svar #1
Jeg bruker Angular 7, og jeg skriver en Interceptor på denne måten.
import { Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpRequest,
HttpResponse,
HttpHandler,
HttpEvent,
HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
@Injectable()
export class HttpConfigInterceptor implements HttpInterceptor {
constructor() { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
var token = localStorage.getItem('token');
if (token) {
request = request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token) });
}
if (!request.headers.has('Content-Type')) {
request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') });
}
request = request.clone({ headers: request.headers.set('Accept', 'application/json') });
return next.handle(request).pipe(
map((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
console.log('event--->>>', event);
}
return event;
}),
catchError((error: HttpErrorResponse) => {
let data = {};
data = {
reason: error && error.error.reason ? error.error.reason : '',
status: error.status
};
return throwError(error);
}));
}
