我需要在用户登录后为每个后续请求设置一些授权头。
为特定请求设置头信息，
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
参考
但是，以这种方式为每个请求手动设置请求头是不可行的。
我如何设置头设置一旦用户登录，也删除注销这些头?
当前回答
我已经能够选择一个更简单的解决方案>添加一个新的头到默认选项合并或加载你的api得到(或其他)函数。
get(endpoint: string, params?: any, options?: RequestOptions) {
if (!options) {
options = new RequestOptions();
options.headers = new Headers( { "Accept": "application/json" } ); <<<<
}
// [...]
}
当然，你可以在默认选项或类中具体化这个头。 这是Ionic生成的api。ts @Injectable()导出类API {}
这是非常快的，它为我工作。我不想要json/ld格式。
其他回答
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 { }
我已经能够选择一个更简单的解决方案>添加一个新的头到默认选项合并或加载你的api得到(或其他)函数。
get(endpoint: string, params?: any, options?: RequestOptions) {
if (!options) {
options = new RequestOptions();
options.headers = new Headers( { "Accept": "application/json" } ); <<<<
}
// [...]
}
当然，你可以在默认选项或类中具体化这个头。 这是Ionic生成的api。ts @Injectable()导出类API {}
这是非常快的，它为我工作。我不想要json/ld格式。
你可以在你的路由中使用canActive，如下所示:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}
canActivate() {
// If user is not logged in we'll send them to the homepage
if (!this.auth.loggedIn()) {
this.router.navigate(['']);
return false;
}
return true;
}
}
const appRoutes: Routes = [
{
path: '', redirectTo: '/deals', pathMatch: 'full'
},
{
path: 'special',
component: PrivateDealsComponent,
/* We'll use the canActivate API and pass in our AuthGuard.
Now any time the /special route is hit, the AuthGuard will run
first to make sure the user is logged in before activating and
loading this route. */
canActivate: [AuthGuard]
}
];
摘自:https://auth0.com/blog/angular-2-authentication
虽然我回答这个问题很晚，但如果有人在寻求更简单的解决方案。
我们可以用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。 以下是我尝试过但由于某些原因放弃的方法: 1. 扩展BaseRequestOptions，并在constructor()中添加动态头。如果我登录，它不能工作。它只创建一次。所以它不是动态的。 2. 扩展Http。与上面的原因相同，我不能在构造函数()中添加动态头文件。如果我重写request(..)方法，并设置报头，像这样:
request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
let token = localStorage.getItem(AppConstants.tokenName);
if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
if (!options) {
options = new RequestOptions({});
}
options.headers.set('Authorization', 'token_value');
} else {
url.headers.set('Authorization', 'token_value');
}
return super.request(url, options).catch(this.catchAuthError(this));
}
你只需要重写这个方法，而不是重写所有的get/post/put方法。
3.我的首选解决方案是扩展BaseRequestOptions和覆盖merge():
@Injectable()
export class AuthRequestOptions extends BaseRequestOptions {
merge(options?: RequestOptionsArgs): RequestOptions {
var newOptions = super.merge(options);
let token = localStorage.getItem(AppConstants.tokenName);
newOptions.headers.set(AppConstants.authHeaderName, token);
return newOptions;
}
}
这个merge()函数将被每个请求调用。
