NativeScript中的httpinterceptor无法正常工作

Question

我正在使用httpinterceptor拦截带有JWT令牌的http头，但不起作用。

下面是我的GET方法。在请求中手动添加报头是可行的，但使用httpinterceptor。

loadLoginData() {
        const url = 'http://mywebpage/myurl',
        const tokenInfo = appSettings.getString('TokenInfo');
        request({
            url: url,
            method: "GET",
            headers: { Authorization: `Bearer ${tokenInfo}`, "Content-Type": "application/json" },
        }).then((response: HttpResponse) => {
            const d = response.content.toJSON();
        }, (e) => {
            alert(e);
        });
    }

headers: { Authorization:持有者${tokenInfo}, "Content-Type": "application/json" }, -->如果我添加这一行，它可以很好地工作，否则请求将成为匿名请求。

httpinterceptors.ts

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import * as appSettings from "tns-core-modules/application-settings";

@Injectable({
  providedIn: 'root'
})

export class httpInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, newRequest: HttpHandler): Observable<HttpEvent<any>> {
    const tokenInfo = appSettings.getString('TokenInfo');
    if (tokenInfo) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${tokenInfo}`,
          'Content-Type': 'application/json'
        }
      });
    }

    return newRequest.handle(request);
  }
}

shared.moduele.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NativeScriptCommonModule } from 'nativescript-angular/common';
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { httpInterceptor } from '../interceptor/httpInterceptor';

@NgModule({
  declarations: [],
  imports: [
    NativeScriptCommonModule,
    NativeScriptFormsModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule
  ],
  exports: [
    NativeScriptCommonModule,
    NativeScriptFormsModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: httpInterceptor, multi: true }
  ],
  schemas: [NO_ERRORS_SCHEMA]
})
export class SharedModule { }

我在这里做错了什么？

Answer 1

您混淆了{N} Core和Angular。"tns-core-modules/http"模块通常与JavaScript / TypeScript一起用于{N}个核心应用程序。

对于Angular，您应该引用HttpClientModule，拦截器将侦听和拦截仅通过Angular的HttpClient类进行的调用。