离子 3 + Angular 5+ 中的 Http 拦截器错误答案

【问题标题】：Http Intercepter Error in ionic 3 + Angular 5+离子 3 + Angular 5+ 中的 Http 拦截器错误
【发布时间】：2018-07-11 15:51:40
【问题描述】：

我正在使用简单的 http 拦截器类通过标头将 jwt 令牌传递给服务器。我已经编写了 http 拦截类，但是当我运行它时显示运行时错误.. 有没有人在 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');
  }

}

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

我运行时遇到的错误

我收到以下错误：Provider parse errors.mixing multi and no multi provider is not possible for token injection token _HTTP_INTERCEPTERS("[ERROR->]"): in NgModule AppModule in ./AppModule@-1:-1

【问题讨论】：

请将您的错误发布为文本，而不是图片。
请将您的错误以清晰的文本形式发布
请添加multi:true
@UnluckyAj 我错过了那部分。我想我已经添加了..感谢您的快速回复

标签： angular ionic3 ionic-native

【解决方案1】：

试试这个解决方案：

添加

{ 提供：HTTP_INTERCEPTORS， useClass: TokenIntercepterProvider, 多：真， }

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,
    },
    ]

【讨论】：

【解决方案2】：

您必须通过以下方式提供HTTP_INTERCEPTORS：

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

重要的部分是multi: true 之一。

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

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

【讨论】：

【解决方案3】：

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

我想我被添加了“multi: true”，但我错过了。

【讨论】：

如果它解决了您的问题，请接受解决方案谢谢
我不需要为所有请求添加令牌。首次安装应用时，用户需要在验证手机号码后从服务器获取 api 令牌。所以这个http通信不需要api令牌或者当时我们没有api令牌。那么我是如何通过使用 http 拦截器来处理这种情况的呢