我需要在用户登录后为每个后续请求设置一些授权头。
为特定请求设置头信息，
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格式。
像下面这样保持独立的服务怎么样
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 -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')
);
}
你可以在你的路由中使用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
