使用 Angular Service Worker 发送 JWT 令牌答案

【问题标题】：Sending JWT Token with Angular Service Worker使用 Angular Service Worker 发送 JWT 令牌
【发布时间】：2019-08-08 14:29:46
【问题描述】：

对于我正在开发的 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。我认为配置并不难，所以它看起来应该可以工作。但问题是我找不到一种方法来增强这个工作人员，总是在每个请求中发送令牌。我知道本地存储在工作人员中不可用，但这不是现在的问题。我首先需要找到一种像 HttpInterceptor 现在工作的方法。这个问题有标准的解决方案吗？

【问题讨论】：

你为什么不使用cookies来代替stackoverflow.com/a/54258744/1235935

标签： angular typescript service-worker progressive-web-apps angular-service-worker

【解决方案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);
                    }));
        }

【讨论】：