Angular - Set headers for every request (Angular - 为每个请求设置头信息)

14 浏览
0 Comments

Angular - Set headers for every request (Angular - 为每个请求设置头信息)

用户登录后，我需要为每一个后续请求设置一些授权头。

要为一个特定请求设置头信息，

import {Headers} from 'angular2/http';
var headers = new Headers();
headers.append(headerName, value);
// HTTP POST using these headers
this.http.post(url, data, {
  headers: headers
})
// do something with the response

参考资料

但是，用这种方式手动为每个请求设置请求头是不可行的。

如何设置一旦用户登录便设置头信息，以及在注销时删除这些头信息？

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

现在通过新的@angular/common/http的HttpClient，自 Angular 4.3.x 版本及其后续版本，HTTP拦截器已经可用了。

现在为每个请求添加一个标题非常简单:

import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
@Injectable()
export class AddHeaderInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    // Clone the request to add the new header
    const clonedRequest = req.clone({ headers: req.headers.append('Authorization', 'Bearer 123') });
    // Pass the cloned request instead of the original request to the next handle
    return next.handle(clonedRequest);
  }
}

有一个不可变性的原则，这就是在设置新内容之前对请求进行克隆的原因。

由于编辑标题是一个非常常见的任务，实际上有一个快捷方式(在克隆请求时):

const clonedRequest = req.clone({ setHeaders: { Authorization: 'Bearer 123' } });

在创建拦截器后，您应该使用HTTP_INTERCEPTORS提供程序进行注册。

import { HTTP_INTERCEPTORS } from '@angular/common/http';
@NgModule({
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: AddHeaderInterceptor,
    multi: true,
  }],
})
export class AppModule {}

0
0 Comments

为了回答你的问题，你可以提供一个包装Angular原始 Http 对象的服务。就像下面描述的那样。

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
@Injectable()
export class HttpClient {
  constructor(private http: Http) {}
  createAuthorizationHeader(headers: Headers) {
    headers.append('Authorization', 'Basic ' +
      btoa('username:password')); 
  }
  get(url) {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.get(url, {
      headers: headers
    });
  }
  post(url, data) {
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.post(url, data, {
      headers: headers
    });
  }
}

而不是注入 Http 对象，您可以注入这个（ HttpClient ）。

import { HttpClient } from './http-client';
export class MyComponent {
  // Notice we inject "our" HttpClient here, naming it Http so it's easier
  constructor(http: HttpClient) {
    this.http = httpClient;
  }
  handleSomething() {
    this.http.post(url, data).subscribe(result => {
        // console.log( result );
    });
  }
}

我认为也可以使用 Http 类的多提供商来提供一个扩展 Http 的自己的类来完成某些事情。请参见此链接：http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html。

0