node.js - Angular 4 HTTP GET 不包括 HTTP header 中用于授权的 JWT

Question

挑战

Angular 模块通过 GET 请求将 JWT token 发送到服务器，以验证用户是否已登录，从而检索其数据。

问题根源(？)

相关模块如下所示:

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import {tokenNotExpired} from 'angular2-jwt';

@Injectable()
export class AuthService {

authToken: any;

    getProfile() {
        let headers = new Headers();
        this.loadToken();
        headers.append('Authorization', this.authToken);
        headers.append('Content-Type', 'application/json');
        return this.http.get(LOCAL_URI + 'admin/profile', headers)
          .map(res => res.json());
      }

  }

期望的结果

期望的结果是 token 到达服务器，因为我可以在 Postman 上复制，它发送带有“Authorization”:“JWT token...”的 header ，并返回包含用户配置文件数据的 JSON 对象的正确响应。

这曾经使用 Angular 2.4 库完美工作，但升级到 Angular 4.2.4 后，它不再工作并从服务器产生以下响应:

Response with status: 401 Unauthorized for URL: http://localhost:3000/admin/profile

观察

如果我让 Angular 在 Web 控制台的标题上使用 JSON.stringify()，它看起来像这样:

{
  "Authorization":["JWT long_hash_number..."],
  "Content-Type":["application/json"]
}

如果我在服务器端获取req(使用采用 Passport JWT 的 NodeJS 应用程序)，则请求对象包含此 _passport 字段:

{ “实例”: { "_key":"护照", “_策略”:{ “ session ”:{ “名称”:“ session ” }, “jwt”:{ “名称”:“jwt”， "_secretOrKey":"我希望这仍然是 secret ", “_verifOpts”:{} } }, “_序列化器”:[]， “_反序列化器”:[]， “_infoTransformers”:[]， “_框架”:{}， "_userProperty":"用户", “策略”:{} }}

**package.json*

{
  ....,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "angular2-flash-messages": "^2.0.4",
    "angular2-jwt": "^0.2.3",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Answer 1

您不能像现在这样将 headers 作为参数传递。您需要将其包装在一个对象中。如下所示:

getProfile() {
    let headers = new Headers();
    this.loadToken();
    headers.append('Authorization', this.authToken);
    headers.append('Content-Type', 'application/json');
    return this.http.get(LOCAL_URI + 'admin/profile', { headers: headers })
      .map(res => res.json());
}

该参数的类型为 RequestOptions ，它不仅仅可以包含标题。

如果您有时间迁移到 Angular 4.3 或更高版本，请考虑使用新的 HttpClient而不是 Http。 Http 已弃用，并将在未来版本中消失。