Angular 6 HttpInterceptor 接口(interface)在生产中失败

标签 angular angular-http-interceptors

我正在使用 HttpInterceptor 接口(interface)在 http 请愿上添加授权 header ,

@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 并上传到服务器时失败。 任何请愿书都会获取 header :Object,status:401,statusText:“Unauthorized”

你能帮我吗?

最佳答案

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

@Injectable({
    providedIn: 'root'
})

而不是仅仅使用:

@Injectable()

这意味着您的拦截器将在您的所有应用程序中可用,以防您有另一个可能出现问题的产品模块。

查看更多详细信息:Angular Providers

关于Angular 6 HttpInterceptor 接口(interface)在生产中失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50785530/

相关文章:

angular - Angular2中的路由变量

angular - 所有页面(包括新页面)中的 ionic 2 选项卡

Angular 拦截器在 Http 请求数据响应之前完成

angular - Angular Intercept catcherror还捕获除404之外的其他错误,并阻止了应用程序按原样工作

angular - 为什么 ngx-mat-select-search 在此示例中不能处理动态数据?

使用延迟加载模块路由进行 Angular Testing

html - 将 html 类型 ="date"与 typescript new Date() 对象进行比较

javascript - 如何从 $httpProvider 拦截器的 'reponse' 函数抛出错误

来自 HTTP 拦截器的 Angular 4 HTTP 请求

angular - 为什么拦截器不返回数据给订阅者?