Angular 6 - 为什么生产版本中缺少 Bearer Token？ (在开发构建中工作正常)

Question

我将 Angular 6 与配置为将持有者 token 应用于传出请求的 HTTP 拦截器一起使用。

• 在开发构建 (ng serve) 中，应用了 token ，一切正常。 :-)

• 在生产构建 (ng serve --prod) 中发送请求时没有承载 token 。 :-(

在产品构建中，我通过在应用 header 后将 header 转储到控制台来验证是否正在应用 header 。

我不知道为什么他们被排除在 http 请求之外。

我的环境文件没有差异。

我还应该看什么？

我该怎么做才能解决这个问题？

起初我以为这是我的本地环境和暂存环境之间的问题，但后来我尝试在本地运行 ng serve --prod 并看到相同的结果。

综上所述，除了一个是生产版本而一个是开发版本之外，一切都是相同的。

jwt 拦截器:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // add authorization header with jwt token if available
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));

        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${currentUser.token}`
                }
            });
            console.log('headers:', request.headers); // <---- I can see headers in console output
        }

        return next.handle(request);
    }
}

这是我在控制台中看到的:

app.module.ts

import { HttpClientModule, HttpClient, HttpInterceptor } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { PortalModule } from '@angular/cdk/portal';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { JwtInterceptor } from './jwt-interceptor';
import { ENV } from '../environments/environment';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
... 
import { myApiService } from './services/my-api.service';
import { myModalComponent } from './_components/my-modal/my-modal.component';
import { myModalService } from './services/my-modal.service';

import { AngularLaravelEchoModule, PusherEchoConfig, EchoInterceptor } from 'angular-laravel-echo/angular-laravel-echo';

export const echoConfig: PusherEchoConfig = {
    userModel: 'App.User',
    notificationNamespace: 'App\\Notifications',
    options: {
        broadcaster: 'pusher',
        key: ENV.pusherConfig.key,
        cluster: ENV.pusherConfig.cluster,
        host: ENV.apiRoot,
        authEndpoint: ENV.apiRoot + '/broadcasting/auth',
    }
};

@NgModule({
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        ReactiveFormsModule,
        PortalModule,
        AngularLaravelEchoModule.forRoot(echoConfig)
    ],
    providers: [
        myApiService,
        myModalService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: JwtInterceptor,
            multi: true,
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: EchoInterceptor,
            multi: true
        }
    ],
    bootstrap: [AppComponent],
    entryComponents: [ 
        myModalComponent
    ]
})

export class AppModule {
}

Answer 1

我在 StackBlitz 中编写了这个应用程序，当我使用 ng serve --prod 在本地运行它时它运行良好。

https://stackblitz.com/edit/angular-yzckos

下载并运行它，看看您的网络选项卡中是否仍然显示 undefined。如果您可以看到 header 被正确发送，那么您的代码中肯定有一些有趣的地方。

试试下面的方法:

1- 尝试运行 `ng serve --port=aDifferentPort//比如 2098

也许那个端口上正在运行某些东西并发送 auth header

2- 尝试使用 AOT false，想不出为什么会导致任何问题

3- 确保您的浏览器没有任何覆盖 Auth header 的扩展程序或尝试其他浏览器

4- 关闭你的其他 HTTP 拦截器，也许其中一个做了一些意想不到的事情

5- 将header名称从Authorizaion改为MyAuthorization，看看是否还是undefined，如果没有，那就是被覆盖了通过一些东西，检查你的 package.json 并确保你没有在生产服务器上运行任何其他东西。

6- 完全关闭 JwtInterceptor 并尝试将授权 header 附加到您的 HTTP 请求，看看您是否仍然得到 undefined.

7- 如果没有帮助，您真的需要向我们发送更多代码:)