在Angular 4中使用ngx-restangular在Http Request中添加自定义标题

时间:2018-03-14 11:29:08

标签: angular typescript restangular angular-http

我在Angular 4中使用ngx-restangular来获取http请求。我必须在某个事件中设置一个自定义标头,从用户那里获取一些输入,然后创建令牌,将其传递给{{ 1}}在 API

以下是我用于设置自定义标头的代码。

Requestheader

现在使用这个我得到输出ActualImage 我需要这样的东西DesiredImage

在下面的所需图片图片中,您可以在import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { RestangularModule, Restangular, RestangularHttp } from 'ngx-restangular'; import { RestangularConfigFactory } from '../app.module'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from '../app.component'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Http, Headers, Response, RequestOptions, } from '@angular/http'; @Component({ templateUrl: 'login.component.html' }) export class LoginComponent implements OnInit { model: any = {}; loading = false; returnUrl: string; headers: Headers; options: RequestOptions; constructor( private route: ActivatedRoute, private router: Router, private restangular: Restangular) { } ngOnInit() { // reset login status // get return url from route parameters or default to '/' this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/'; } login() { this.loading = true; this.headers = new Headers(); this.headers.append('Content-Type', 'application/json'); this.headers.append('Authorization', 'Basic ' + btoa(this.model.username + ':' + this.model.password)); this.options = new RequestOptions({ headers: this.headers }); console.log(this.options); this.restangular.one('authentication').one('user').get([''], [this.headers]).subscribe( response => { console.log(response); }); } } 中看到我希望使用Request Header创建一个名为authorization的新字段。

感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

使用拦截器=>

RestangularProvider.addFullRequestInterceptor((element, operation, path, url, 
headers, params)=> {
   return {
     params: Object.assign({}, params, {sort:"name"}),
     headers: headers,
     element: element
   }
 });

https://github.com/2muchcoffeecom/ngx-restangular#addfullrequestinterceptor