Sending JWT Token with Angular Service Worker

Question

For an Angular 7 app I am developing I'm using a HttpInterceptor to send the token with every request. It looks something like this:

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

To turn this app into a progressive web app I am using @angular/service-worker and @angular/pwa. Configuration isn't hard I thought so it looks like it should work. But the problem is I can't find a way to enhance this worker with always sending the token with every request. I know localstorage isn't available in the worker, but that is not the problem right now. I first need to find a way like the HttpInterceptor works now. Is there a standard solution for this problem?

Why don't you use cookies instead https://stackoverflow.com/a/54258744/1235935 — Saptarshi Basu, Mar 18 '19 at 09:13

score 0 · Answer 1 · answered Mar 18 '19 at 10:09

I'm using angular 7 and i write Interceptor in this way.

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

Sending JWT Token with Angular Service Worker

1 Answers1