全局和动态地将标头附加到 HTTP 请求 - Angular2答案

【问题标题】：Appending Headers to HTTP requests Globally and Dynamically - Angular2全局和动态地将标头附加到 HTTP 请求 - Angular2
【发布时间】：2017-10-12 15:55:34
【问题描述】：

我需要一个 Authorization 标头附加到我的 Angular2 应用程序完成的每个 HTTP 请求。

第一个请求是登录请求，它没有授权标头。登录成功后，服务器会返回一个令牌，我需要将其作为授权标头附加到每个后续 HTTP 请求中。

我从服务器获取令牌没有任何问题。我可以使用我的 angular2 应用程序成功登录。但问题是，令牌未附加到后续请求标头。

这是我的实现。

我创建了一个扩展 BaseRequestOptions 类的 CustomRequestOptions 类。

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
    constructor(private _globals: Globals) {
        super();
        this.headers.append('Content-Type', 'application/json');
    }

    addHeader(headerName: string, headerValue: string) {
       console.log("Custom req options, setting the customer header "+headerName+" , "+headerValue);
       this.headers.append(headerName, headerValue);
    }
}

我已将其添加到 @NgModule 以使此 CustomRequestOptions 成为全球性的。（在所有组件中可见）

@NgModule({
  imports:      [ BrowserModule, HttpModule, routing, FormsModule ],
  declarations: [ AppComponent, TendersComponent, TenderCategoriesComponent, TenderDetailsComponent, PageNotFoundComponent, ConvertUrlPipe ],
  providers   : [ Globals, 
        {provide: RequestOptions, useClass: CustomRequestOptions}
    ],
  bootstrap:    [ AppComponent ]
})

现在，在我的组件类中，我正在调用CustomRequestOptions 中的addHeader 方法。

export class LoginComponent {

  private _token: string;
  private _returnMsg: string;

  constructor(private _usersService: UsersService, private _globals: Globals, private _customRequestOptions: CustomRequestOptions) {

  }

  onLoginFormSubmit(formData: any) {

    this._usersService.login(formData.emailAddress, formData.password).subscribe(

      returnRes => {

        this._returnMsg = returnRes.returnMsg;
        this._token = returnRes.token;

        if (this._returnMsg == "SUCCESS") {

          //sucess
          console.log("AUTH SUCCESS");
          let x = "Bearer " + this._token;
          this._customRequestOptions.addHeader("Authorization", x);

          this.getUserRoles(); //this call needs authorization header.

        }

      }

    );

  }

}

即使我使用this._customRequestOptions.addHeader("Authorization", x); 设置标头，下一个需要授权标头才能正常工作的调用也会失败。在服务器端，我可以看到，那部分是空的。

这里有什么问题？

【问题讨论】：

你看过github.com/auth0/angular2-jwt吗？对于 JWT，这是我的首选路线。
事实上没有。感谢您的信息。但目前，我更喜欢这个解决方案，因为完成新事物需要一些时间

标签： angular http-headers angular-http

【解决方案1】：

扩展BaseRequestOptions 的问题是构造函数在浏览器的生命周期中只运行一次，超过此时间，更改将不会传播。而且，更改需要在 super 调用中，如下所示：

super({ 
  method: RequestMethod.Get,
  headers: new Headers({
    'Content-Type': 'application/json',
    'X-Some-Header': 'some-content'
  });
});

在super 之外对headers 属性的操作不起作用。扩展BaseRequestOptions 的另一个选项是在您的模块中执行一次：

class DefaultRequestOptions extends BaseRequestOptions{
    headers:Headers = new Headers({
        'Content-Type': 'poop'
    });
}
....
providers: [{provide: RequestOptions, useClass: DefaultRequestOptions}],

在 Angular2 的早期版本中曾经有一种方法可以访问 http 上的 _defaultOptions 对象，但现在它受到保护且无法访问。它看起来像这样： this.http._defaultOptions.headers.set('Authorization', 'token');

TLDR；

如果您需要在应用程序的生命周期内更改标头，那么我建议您查看 https://github.com/auth0/angular2-jwt 之类的内容或将您自己的包装器写入 http 库（类似于 angular2-jwt 的操作方式）。我已经编写了自己的 fork 来处理我的用例，然后我才能说“如果存在某些东西，那么就执行 x”。如果您决定自己写，这并不难，您可以查看https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts#L94 以获得灵感。这将替换@angular/http 中的普通http 库。

抱歉，这可能不是您正在寻找的解决方案，但这是我在尝试应对相同挑战时所学到的。希望它能对您的代码和潜在解决方案的问题有所了解。

【讨论】：