使用 Angular Service Worker 发送 JWT 令牌

Posted 2023-03-10

【中文标题】使用 Angular Service Worker 发送 JWT 令牌

【英文标题】：Sending JWT Token with Angular Service Worker

【发布时间】：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来代替***.com/a/54258744/1235935

【参考方案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);
                    ));