typescript - JWT ტოკენის გამოგზავნა Angular სერვისურ მუშაკთან


Angular 7 აპლიკაციისთვის, რომლის განვითარებაზეც ვმუშაობ, მე ვიყენებ HttpInterceptor-ს, რათა ვგზავნიდე ტოკენს ყველა მოთხოვნასთან ერთად. ეს გამოიყურება დაახლოებით ასე:

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

ამ აპის პროგრესული ვებ აპად გადაქცევისათვის მე ვიყენებ @angular/service-worker და @angular/pwa. კონფიგურაცია რთული არ არის, ასე მეგონა, ამიტომ ჩანს, რომ ყველაფერი კარგად უნდა მუშაობდეს. მაგრამ პრობლემა ის არის, რომ ვერ ვპოულობ გზას, როგორ დავამატო ამ ვორკერში ტოკენის ყოველთვის ყოველი მოთხოვნისას გაგზავნა. ვიცი, რომ localstorage ვორკერში არ არის ხელმისაწვდომი, მაგრამ ეს ახლა პრობლემა არ არის. პირველ რიგში, უნდა ვიპოვო გზა, როგორ ვითარდება ახლა HttpInterceptor. არსებობს რაიმე სტანდარტული გადაწყვეტილება ამ პრობლემისთვის?

პასუხი #1

მე ვიყენებ Angular 7-ს და ვწერ Interceptor-ს ასე.

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