2

我在 Angular 中有应用程序，我只有一个 HttpClientModule，但是当我在构造函数中提供 HttpClient 时，如下所示：

export class UserService {

constructor(private http: HttpClient /** <---- this one is ok, and requests are intercepted */) {
    const i='i'; 
}

但在另一个模块中我也有类似的构造函数

export class TableComponent implements OnInit {

  ...
  ...
  constructor(private http: HttpClient /** <---- this one is not ok, and requests are  not intercepted */) {

  }

我的 app.module

@NgModule({
  declarations: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorRefresh,
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true,
    },
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    MainAppModule,
    TableModule,

表格模块内容

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {TableHeaderComponent} from './table-header/table-header.component';
import {TableComponent} from './table/table.component';
import {TablePaginationComponent} from './table-pagination/table-pagination.component';
import {TableFilterComponent} from './table-filter/table-filter.component';

@NgModule({
  declarations: [TableHeaderComponent, TableComponent, TablePaginationComponent, TableFilterComponent],
  imports: [
    CommonModule,
  ],
  exports: [TableHeaderComponent, TableComponent, TablePaginationComponent, TableFilterComponent],
})
export class TableModule {
}

主应用模块

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {UsersComponent} from './users/users.component';
import {MainAppRoutingModule} from './main-app-routing.module';
import {LayoutComponent} from './layout/layout.component';
import {ThemeModule} from '../../@theme/theme.module';
import {NbCardModule} from '@nebular/theme';
import {Ng2SmartTableModule} from 'ng2-smart-table';
import {TableModule} from '../table/table.module';

@NgModule({
  declarations: [UsersComponent, LayoutComponent],
  imports: [
    CommonModule, MainAppRoutingModule, ThemeModule, NbCardModule, Ng2SmartTableModule, TableModule,
  ],
})
export class MainAppModule {
}

我究竟做错了什么？

4

2 回答 2

2

仅在您的应用程序中导入HttpClientModule一次并在同一位置提供拦截器。

根据文档：

因为拦截器是 HttpClient 服务的（可选）依赖项，所以您必须在提供 HttpClient 的同一注入器（或注入器的父级）中提供它们。DI 创建 HttpClient 后提供的拦截器将被忽略。

于 2020-02-26T08:51:19.347 回答
0

我认为您的问题在于服务注入。

我将在此处留下一个示例，以便您进行比较。

父模块（AppModule）导入 HttpClientModule 和子模块

@NgModule({
  declarations: [AppComponent],
  providers: [ChildService],
  imports: [AppRoutingModule, BrowserModule, HttpClientModule, ChildModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

子模块将拦截 http 请求，因此发出这些请求的服务应注入该模块。

@NgModule({
  declarations: [],
  imports: [],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    }
  ]
})
export class ChildModule {}

该服务应接收 HttpClient 依赖项。

@Injectable({
  providedIn: ChildModule
})
export class {
  constructor(private _http: HttpClient) {}
}

拦截器应该是这样的：

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {
  private token = "";
  constructor(private router: Router, private tokenStore: TokenStoreService) {
    this.token = "fake-token";
  }

  intercept<T>(
    req: HttpRequest<T>,
    next: HttpHandler
  ): Observable<HttpEvent<T>> {
    const authHeader = { Authorization: "Basic " + this.token };
    const authReq = req.clone({ setHeaders: authHeader });
    return next.handle(authReq);
  }
}

我希望这对你有帮助:)

于 2020-02-26T11:14:20.837 回答