我需要在用户登录后为每个后续请求设置一些授权头。
为特定请求设置头信息，
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
参考
但是，以这种方式为每个请求手动设置请求头是不可行的。
我如何设置头设置一旦用户登录，也删除注销这些头?
当前回答
在这种情况下，扩展BaseRequestOptions可能会有很大帮助。看看下面的代码:
import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS, Headers, Http, BaseRequestOptions} from 'angular2/http';
import {AppCmp} from './components/app/app';
class MyRequestOptions extends BaseRequestOptions {
constructor () {
super();
this.headers.append('My-Custom-Header','MyCustomHeaderValue');
}
}
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(RequestOptions, { useClass: MyRequestOptions })
]);
这应该包括'My-Custom-Header'在每个调用。
更新:
为了能够在任何时候改变头，而不是上面的代码，你也可以使用下面的代码来添加一个新的头:
this.http._defaultOptions.headers.append('Authorization', 'token');
要删除就可以了
this.http._defaultOptions.headers.delete('Authorization');
还有另一个函数，你可以用来设置值:
this.http._defaultOptions.headers.set('Authorization', 'token');
上述解决方案在typescript上下文中仍然不完全有效。_defaultHeaders是受保护的，不应该这样使用。我会推荐上面的解决方案作为快速修复，但从长远来看，更好的方法是编写自己的包装器来处理http调用，它也可以处理身份验证。以auth0为例，它更好、更简洁。
https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts
Update - June 2018 I see a lot of people going for this solution but I would advise otherwise. Appending header globally will send auth token to every api call going out from your app. So the api calls going to third party plugins like intercom or zendesk or any other api will also carry your authorization header. This might result into a big security flaw. So instead, use interceptor globally but check manually if the outgoing call is towards your server's api endpoint or not and then attach auth header.
其他回答
虽然我回答这个问题很晚，但如果有人在寻求更简单的解决方案。
我们可以用angular -jwt。angular2-jwt在从Angular 2应用中发起HTTP请求时，会自动将一个JSON Web令牌(JWT)作为授权标头。
我们可以用高级配置选项设置全局标头
export function authHttpServiceFactory(http: Http, options: RequestOptions) {
return new AuthHttp(new AuthConfig({
tokenName: 'token',
tokenGetter: (() => sessionStorage.getItem('token')),
globalHeaders: [{'Content-Type':'application/json'}],
}), http, options);
}
发送每个请求令牌
getThing() {
let myHeader = new Headers();
myHeader.append('Content-Type', 'application/json');
this.authHttp.get('http://example.com/api/thing', { headers: myHeader })
.subscribe(
data => this.thing = data,
err => console.log(error),
() => console.log('Request Complete')
);
// Pass it after the body in a POST request
this.authHttp.post('http://example.com/api/thing', 'post body', { headers: myHeader })
.subscribe(
data => this.thing = data,
err => console.log(error),
() => console.log('Request Complete')
);
}
在这种情况下，扩展BaseRequestOptions可能会有很大帮助。看看下面的代码:
import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS, Headers, Http, BaseRequestOptions} from 'angular2/http';
import {AppCmp} from './components/app/app';
class MyRequestOptions extends BaseRequestOptions {
constructor () {
super();
this.headers.append('My-Custom-Header','MyCustomHeaderValue');
}
}
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
HTTP_PROVIDERS,
provide(RequestOptions, { useClass: MyRequestOptions })
]);
这应该包括'My-Custom-Header'在每个调用。
更新:
为了能够在任何时候改变头，而不是上面的代码，你也可以使用下面的代码来添加一个新的头:
this.http._defaultOptions.headers.append('Authorization', 'token');
要删除就可以了
this.http._defaultOptions.headers.delete('Authorization');
还有另一个函数，你可以用来设置值:
this.http._defaultOptions.headers.set('Authorization', 'token');
上述解决方案在typescript上下文中仍然不完全有效。_defaultHeaders是受保护的，不应该这样使用。我会推荐上面的解决方案作为快速修复，但从长远来看，更好的方法是编写自己的包装器来处理http调用，它也可以处理身份验证。以auth0为例，它更好、更简洁。
https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts
Update - June 2018 I see a lot of people going for this solution but I would advise otherwise. Appending header globally will send auth token to every api call going out from your app. So the api calls going to third party plugins like intercom or zendesk or any other api will also carry your authorization header. This might result into a big security flaw. So instead, use interceptor globally but check manually if the outgoing call is towards your server's api endpoint or not and then attach auth header.
const headers = new HttpHeaders()
.set('content-type', 'application/json')
.set('x-functions-key', '');
return this.http.get<Person[]>(baseUrl, {
headers: headers,
});
使用append方法将新值附加到现有值集
headers.append('Access-Control-Allow-Origin', '*')
像下面这样保持独立的服务怎么样
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);
您将看到添加的标题，例如:-授权如下
angular 2.0.1及更高版本有一些改动:
import {RequestOptions, RequestMethod, Headers} from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app.routing.module';
import { AppComponent } from './app.component';
//you can move this class to a better place
class GlobalHttpOptions extends RequestOptions {
constructor() {
super({
method: RequestMethod.Get,
headers: new Headers({
'MyHeader': 'MyHeaderValue',
})
});
}
}
@NgModule({
imports: [ BrowserModule, HttpModule, AppRoutingModule ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ],
providers: [ { provide: RequestOptions, useClass: GlobalHttpOptions} ]
})
export class AppModule { }
