ionic 3 + Angular 5+ 中的 Http 拦截器错误

Question

我正在使用简单的 http 拦截器 class 通过 header 将 jwt 令牌传递给服务器。我写了 http 拦截 class 但是当我运行它显示运行时间错误.. 有没有人在 ionic 3 和 angular 5+..

中实现了 http 拦截器

请帮忙

这里附上app.module.ts

  providers: [
StatusBar,
SplashScreen,
StatusBar,HttpClient,
Push,
{provide: HTTP_INTERCEPTORS,useClass:TokenIntercepterProvider},
{provide: ErrorHandler, useClass: IonicErrorHandler},
StudentDetailsProvider,
EventServiceProvider,
EventServiceProvider,
AttendanceProvider,
GroupChatServiceProvider,
ChatserviceProvider,
RestProvider,
LocationServiceProvider,
GoogleMaps,
NativeGeocoder,
StudentparentinfoProvider,
RestusersProvider,
FcmProvider,
TokenIntercepterProvider

] })

这里是tokenIntercepterProvider

import {HttpClient, HttpInterceptor} from '@angular/common/http';
import {Injectable, Injector} from '@angular/core';
import {HttpRequest,HttpHandler,HttpEvent} from "@angular/common/http";
import  {Observable} from "rxjs/Observable";
import {Storage} from "@ionic/storage";


@Injectable()
export class TokenIntercepterProvider implements HttpInterceptor{
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const changedReq = req.clone({headers: req.headers.set('Authorization', 'Bearer xxx.xy.yyx')});
    return next.handle(changedReq);

  }

  constructor(private inj:Injector) {
    console.log('Hello TokenIntercepterProvider Provider');
  }

}

这里 iam 将字符串硬编码到不记名令牌，即使这不起作用

我在运行这个

时得到的错误

我收到以下错误：提供者解析 errors.mixing 多提供者并且没有多提供者无法用于令牌注入令牌 _HTTP_INTERCEPTERS("[ERROR->]"): in NgModule AppModule in ./ AppModule@-1:-1

Answer 1

试试这个解决方案：

添加

{ provide: HTTP_INTERCEPTORS, useClass: TokenIntercepterProvider, multi: true, }

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

providers: [
    StatusBar,
    SplashScreen,
    StatusBar,HttpClient,
    Push,
    {provide: HTTP_INTERCEPTORS,useClass:TokenIntercepterProvider},
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    StudentDetailsProvider,
    EventServiceProvider,
    EventServiceProvider,
    AttendanceProvider,
    GroupChatServiceProvider,
    ChatserviceProvider,
    RestProvider,
    LocationServiceProvider,
    GoogleMaps,
    NativeGeocoder,
    StudentparentinfoProvider,
    RestusersProvider,
    FcmProvider,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenIntercepterProvider,
      multi: true,
    },
    ]

Answer 2

您必须按以下方式提供 HTTP_INTERCEPTORS：

{provide: HTTP_INTERCEPTORS,useClass:TokenIntercepterProvider, multi: true},

重要的部分是 multi: true。

Angular 有单依赖注入和多依赖注入。 Single 会给你一个所需 class 的 Instance，multi 会给你一个数组。你不能将它们混合在一起，无论是多还是单，但使用一个令牌，你不能将单和多混合在一起。

这篇文章有助于解释一下： https://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html

Answer 3

{provide: HTTP_INTERCEPTORS,useClass:TokenIntercepterProvider, multi: true},

我想我被添加了 "multi: true" 但我想念它。

ionic 3 + Angular 5+ 中的 Http 拦截器错误

Http Intercepter Error in ionic 3 + Angular 5+

ionic-native

ionic3

angular