NativeScript 中的 httpinterceptor 无法正常工作

Question

我正在使用 httpinterceptor 拦截带有 JWT 令牌的 http headers 但无法正常工作。

这是我的 GET 方法。在请求中手动添加 headers 是可行的，但使用了 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.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} 核心和 Angular。 "tns-core-modules/http" 模块通常用于带有 JavaScript / TypeScript 的 {N} 核心应用程序。

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

NativeScript 中的 httpinterceptor 无法正常工作

httpinterceptor in NativeScript not working properly

nativescript

nativescript-angular

angular