NativeScript 中的 httpinterceptor 无法正常工作答案

【问题标题】：httpinterceptor in NativeScript not working properlyNativeScript 中的 httpinterceptor 无法正常工作
【发布时间】：2019-05-12 06:52:03
【问题描述】：

我正在使用 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:Bearer ${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.module.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 { }

我在这里做错了什么？

【问题讨论】：

我可以知道request方法在loadLoginData中的定义在哪里吗？
我没有得到你。你能详细说明一下吗？
你的拦截方法被调用了吗？
providers: [ { provide: HTTP_INTERCEPTORS, useClass: httpInterceptor, multi: true } ]，放置
你在 loadLoginData 中调用了一个名为 request 的方法，它是来自 NativeScript 核心模块的方法。

标签： angular nativescript nativescript-angular

【解决方案1】：

您正在混淆 {N} Core 和 Angular。 "tns-core-modules/http" 模块通常用于 {N} 个带有 JavaScript / TypeScript 的核心应用程序。

对于 Angular，您应该参考 HttpClientModule，拦截器将侦听和拦截仅通过 Angular 的 HttpClient 类发出的调用。

【讨论】：