Angular 6 HttpInterceptor接口在生产环境中失败

Question

我正在使用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：“未经授权”

你能帮我吗？

- Juan Manuel Lopez

---

使用浏览器开发工具检查本地存储中的值以及发送的请求内容。在服务器上添加日志以查看它所接收到的令牌和期望的内容。 - JB Nizet

我认为应该是 if(token) 而不是 if(!token) ... - TheUnreal

不要克隆请求并将其分配给相同的对象引用。可以使用类似 const anotherReq=request.clone(); 的内容。 - nAviD

Answer 1

声明你的拦截器在根中提供：

@Injectable({
    providedIn: 'root'
})

代替使用只有：

@Injectable()

它意味着您的拦截器将在整个应用程序中可用，这是在您有另一个可能会引起问题的产品模块的情况下。请查看更多详细信息：Angular Providers。

- Cassio Lemos