我需要在用户登录后为每个后续请求设置一些授权头。
为特定请求设置头信息，
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
参考
但是，以这种方式为每个请求手动设置请求头是不可行的。
我如何设置头设置一旦用户登录，也删除注销这些头?
当前回答
为了回答你的问题，你可以提供一个服务来包装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。
其他回答
你可以用一些授权头创建你自己的http客户端:
import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class HttpClientWithAuthorization {
constructor(private http: HttpClient) {}
createAuthorizationHeader(bearerToken: string): HttpHeaders {
const headerDict = {
Authorization: 'Bearer ' + bearerToken,
}
return new HttpHeaders(headerDict);
}
get<T>(url, bearerToken) {
this.createAuthorizationHeader(bearerToken);
return this.http.get<T>(url, {
headers: this.createAuthorizationHeader(bearerToken)
});
}
post<T>(url, bearerToken, data) {
this.createAuthorizationHeader(bearerToken);
return this.http.post<T>(url, data, {
headers: this.createAuthorizationHeader(bearerToken)
});
}
}
然后在你的服务类中注入它而不是HttpClient:
@Injectable({
providedIn: 'root'
})
export class SomeService {
constructor(readonly httpClientWithAuthorization: HttpClientWithAuthorization) {}
getSomething(): Observable<Object> {
return this.httpClientWithAuthorization.get<Object>(url,'someBearer');
}
postSomething(data) {
return this.httpClientWithAuthorization.post<Object>(url,'someBearer', data);
}
}
像下面这样保持独立的服务怎么样
import {Injectable} from '@angular/core';
import {Headers, Http, RequestOptions} from '@angular/http';
@Injectable()
export class HttpClientService extends RequestOptions {
constructor(private requestOptionArgs:RequestOptions) {
super();
}
addHeader(headerName: string, headerValue: string ){
(this.requestOptionArgs.headers as Headers).set(headerName, headerValue);
}
}
当你从另一个地方调用这个时，使用this. httpclientservice。addHeader("Authorization"， " holder " + this.tok);
您将看到添加的标题，例如:-授权如下
我设置头的最大问题(在2022年)是HttpHeaders上的append方法返回原始对象的克隆，而没有修改原始对象本身。所以标题。Append ('header'， 'value')不够。我必须重新分配结果或直接在HTTP调用中使用它:
let headers = new HttpHeaders();
headers = headers.append('header', 'value');
this.http.get<any>('https://someulr.com/api/users', { headers });
为了回答你的问题，你可以提供一个服务来包装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。
HTTP拦截器是实现这一点的正确方法。在这里没有看到关于如何完全实现它的适当文档，所以我包含了谷歌官方指南的链接。在实现之前，我已经通读了文档，因为在安全性和使用多个拦截器包方面存在许多潜在的缺陷。
https://angular.io/guide/http#intercepting-requests-and-responses
import { Injectable } from '@angular/core';
import {
HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs';
/** Pass untouched request through to the next request handler. */
@Injectable()
export class NoopInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
return next.handle(req);
}
}
