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

Posted 2023-03-10

【中文标题】Angular 4 HTTP GET 不包括用于 HTTP 标头中的授权的 JWT

【英文标题】：Angular 4 HTTP GET not including JWT for Authorization in HTTP Header

【发布时间】：2018-05-17 10:17:40

【问题描述】：

挑战

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 上进行复制，它发送带有“授权”的标头：“JWT 令牌...”并返回带有 JSON 的正确响应包含用户个人资料数据的对象。

这在使用 Angular 2.4 库时可以完美运行，但在升级到 Angular 4.2.4 后，它不再工作并从服务器产生以下响应：

响应状态：401 未经授权的 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":"护照", “_策略”： “会议”： “名称”：“会话” , “jwt”： “名称”：“jwt”， "_secretOrKey":"Ihopethisstayssecret", “_verifOpts”： , "_serializers":[], "_deserializers":[], "_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"
  

【参考方案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 已弃用，并将在未来的版本中消失。

【讨论】：

谢谢。我忽略了那个细节。确实如你所说。请记住，这已被弃用。