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);
                    }));
        }