Angular 6 HttpInterceptor 接口在生产中失败答案

【问题标题】：Angular 6 HttpInterceptor interface fail on productionAngular 6 HttpInterceptor 接口在生产中失败
【发布时间】：2019-04-06 17:13:42
【问题描述】：

我正在使用HttpInterceptor 接口在http 请愿书上添加授权标头，

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(
        private localStorage: LocalStorageService,
        private sessionStorage: SessionStorageService
    ) {
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (!request || !request.url || (/^http/.test(request.url) && !(SERVER_API_URL && request.url.startsWith(SERVER_API_URL)))) {
            return next.handle(request);
        }

        const token = this.localStorage.retrieve('authenticationToken') || this.sessionStorage.retrieve('authenticationToken');
        if (!!token) {
            request = request.clone({
                setHeaders: {
                    Authorization: 'Bearer ' + token
                }
            });
        }
        return next.handle(request);
    }

}

我的应用模块

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      VistaModule,
      LayoutModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在本地它可以完美运行，但是在生成 prod dist 并在服务器上上传时失败。任何请愿书都会获得标头：Object, status: 401, statusText: "Unauthorized"

你能帮帮我吗？

【问题讨论】：

使用浏览器开发工具检查本地存储中的值是什么，请求中发送了什么。将日志添加到您的服务器以查看它作为令牌获得的内容，以及它所期望的内容。
我认为应该是if(token) 而不是if(!token) ...
不要克隆请求并将其分配给相同的对象引用。使用类似 const anotherReq=request.clone();

标签： angular angular-http-interceptors

【解决方案1】：

声明要在根目录中提供您的拦截器：

@Injectable({
providedIn: 'root'

})

而不是仅仅使用：

@Injectable()

这意味着您的拦截器将在您的所有应用程序中可用，如果您有另一个产品模块，这可能是问题所在。

查看更多详情：angular providers

【讨论】：