angular 5 中的拦截器

Question

我在项目 angular 5 中创建了拦截器，但没有用，我在文件 app.module.ts 中注入了拦截器，但也出现了错误，我还在拦截器中添加了 console.log 进行测试，但是 console.log不显示

代码拦截器：

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

    import { Observable } from 'rxjs';

    /** Pass untouched request through to the next request handler. */
    @Injectable()
    export class AuthInterceptor implements HttpInterceptor {

      intercept(req: HttpRequest<any>, next: HttpHandler):
        Observable<HttpEvent<any>> {
            console.log('redfùmfs');
            const clonedRequest = req.clone({
                headers: req.headers.set('Authorization', 'Bearer '+localStorage.getItem('token'))

            });
        return next.handle(clonedRequest);
      }
    }

代码app.module.ts：当我在提供程序中添加名称拦截器时

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppRoutingModule } from './app.routing';
import { ComponentsModule } from './components/components.module';

import { AppComponent } from './app.component';

import { DashboardComponent } from './dashboard/dashboard.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { TableListComponent } from './table-list/table-list.component';
import { TypographyComponent } from './typography/typography.component';
import { IconsComponent } from './icons/icons.component';
import { MapsComponent } from './maps/maps.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { UpgradeComponent } from './upgrade/upgrade.component';

import { ArticleService } from './services/article.service';
import { AuthInterceptor } from './services/auth.interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

import {
  AgmCoreModule
} from '@agm/core';
import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    ComponentsModule,
    RouterModule,
    AppRoutingModule,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
    })
  ],
  declarations: [
    AppComponent,
    AdminLayoutComponent,
  ],
  providers: [
  ArticleService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我在 providers appmodule 中注入拦截器，但也有错误

Answer 1

您的 app.module.ts 有误。您导入了以前版本的 HttpModule。用以下内容替换您的代码：

import { HttpClientModule } from '@angular/common/http';

并导入 AppModule 的导入

angular 5 中的拦截器

interceptors in angular 5

interceptor

angular

angular5