Question

挑战

Angular模块使用GET请求将JWT令牌发送到服务器，以验证用户是否已登录，以便检索其数据。

问题来源（？）

有问题的模块如下所示：

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());
      }

  }

期望的结果

所需的结果将是令牌进入服务器，因为我可以在Postman上复制，它发送带有“Authorization”的头：“JWT token ...”并返回带有JSON的正确响应对象包括用户个人资料数据。

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

状态响应：401网址未经授权： http://localhost:3000/admin/profile

观察

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

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

如果我在服务器端使用 req （使用使用Passport JWT的NodeJS应用程序），请求对象包含此_passport字段：

{ “实例”：{ “_key”： “护照”， “_strategies”：{ “会话”：{ “名”：“会话” }， “智威汤逊”：{ “名”：“智威汤逊”， “_secretOrKey”： “Ihopethisstayssecret” “_verifOpts”：{} } }， “_serializers”：[]， “_deserializers”：[]， “_infoTransformers”：[]， “_framework”：{}， “_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已被弃用，并将在以后的版本中消失。

Angular 4 HTTP GET不包括用于HTTP头中的授权的JWT

1 个答案: