Angular2令牌不发送头

我刚刚完成Angular2 Token auth的设置，从我在文档中看到的情况来看，它应该在每个请求的头中发送

客户端
uid
到期
和
Token
，但我注意到我总是在后端收到默认的
登录
响应

我的角度服务很简单

export class ClientService {

  constructor(private http: Http) { }

  private clientsUrl = 'baseUrl/clients';

  getClients() : Observable<Client[]> {
    return this.http.get(this.clientsUrl)
      .map((res: Response) => res.json())
      .catch((error:any) => Observable.throw(error.json().error || 'Server error'));

  };

我还有一个通用模型，包括timestamps+ID，因为我不确定它将如何处理响应

export class Client {
  constructor(
    id: number,
    name: string,
    status: string,
    logo: string,
    user_id: number,
    created_at: Date,
    updated_at: Date
  ){}
}

我已经在POSTMAN中测试了端点，结果与我预期的一样。我在标题中发送它
access\u token
client
和
uid
，它的身份验证没有问题

当我检查网络时，我没有看到请求中传递的头

GET /clients HTTP/1.1
Host: baseUrl
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36
Referer: http://localhost:8080/clients
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8

我正在研究如何为每一个调用预先设置它们，但我认为Angular2令牌应该可以解决这个问题，如中所述

我这样做是不恰当的，还是我必须制作某种拦截器来预先处理所有的头文件

更新代码

感谢下面的评论，我意识到我需要传递标题。我已经修改了它来处理下面的代码段，但是Angular2令牌应该会自动发送标题。我应该遵循JWT令牌逻辑还是Angular2令牌

 getClients() : Observable<Client[]> {
let headers = new Headers({
  'Content-Type': 'application',
  'access-token': localStorage.getItem('accessToken'),
  'client': localStorage.getItem('client'),
  'uid':localStorage.getItem('uid')
});
let options = new RequestOptions({ headers: headers});

return this.http.get(this.clientsUrl, options)
  .map((res: Response) => res.json())
  .catch((error:any) => Observable.throw(error.json().error || 'Server error'));

getClients（）：可观察{
让标题=新标题({
“内容类型”：“应用程序”，
“访问令牌”：localStorage.getItem（'accessToken'），
“客户端”：localStorage.getItem（“客户端”），
'uid'：localStorage.getItem（'uid'）
});
let options=newrequestoptions（{headers:headers}）；
返回this.http.get（this.clientsUrl，options）
.map（（res:Response）=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；

})
 在
选项中
将
with credentials设置为true

let options = new RequestOptions({ headers: headers});
options.withCredentials = true;///////////////////add this

还要逐个附加标题

    let headers = new Headers({ 'Content-Type': 'application', });
    headers.append('access-token', localStorage.getItem('accessToken'));
    headers.append('client', localStorage.getItem('client'))
    headers.append('uid', localStorage.getItem('uid'))

在
选项中
将
with credentials
设置为true

let options = new RequestOptions({ headers: headers});
options.withCredentials = true;///////////////////add this

还要逐个附加标题

    let headers = new Headers({ 'Content-Type': 'application', });
    headers.append('access-token', localStorage.getItem('accessToken'));
    headers.append('client', localStorage.getItem('client'))
    headers.append('uid', localStorage.getItem('uid'))

对于任何遇到这种情况的人，我的问题是我没有使用Angular2提供的令牌

这实际上使我非常容易确保正确的标记，并且没有重复的标题

  constructor(private authToken: Angular2TokenService) {
  }

  getClients(): Observable<Client[]> {
    return this.authToken.get('clients')
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  };

  addClient(client:Client): Observable<Client> {
    return this.authToken.post('clients', client)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

  getClientById(id): Observable<Client> {
    return this.authToken.get('clients/' + id)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

  deleteClient(id): Observable<Client> {
    return this.authToken.delete('clients/' + id)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

  editClientById(client:any): Observable<Client> {
    return this.authToken.patch('clients/' + client.id, client)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

构造函数（私有authToken:Angular2TokenService）{
}
getClients（）：可观察{
返回此.authToken.get（'clients'）
.map（res=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
};
addClient（客户端：客户端）：可观察{
返回此.authToken.post（'clients'，client）
.map（res=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}
getClientById（id）：可观察{
返回此.authToken.get（'clients/'+id）
.map（res=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}
deleteClient（id）：可观察{
返回此.authToken.delete（'clients/'+id）
.map（res=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}
editClientById（客户端：任意）：可观察{
返回此.authToken.patch（'clients/'+client.id，client）
.map（res=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}

只要您在
init
中声明了
baseApi
，这将简化流程。
对于任何遇到此问题的人，我的问题是我没有使用Angular2提供的令牌

这实际上使我非常容易确保正确的标记，并且没有重复的标题

  constructor(private authToken: Angular2TokenService) {
  }

  getClients(): Observable<Client[]> {
    return this.authToken.get('clients')
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  };

  addClient(client:Client): Observable<Client> {
    return this.authToken.post('clients', client)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

  getClientById(id): Observable<Client> {
    return this.authToken.get('clients/' + id)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

  deleteClient(id): Observable<Client> {
    return this.authToken.delete('clients/' + id)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

  editClientById(client:any): Observable<Client> {
    return this.authToken.patch('clients/' + client.id, client)
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

构造函数（私有authToken:Angular2TokenService）{
}
getClients（）：可观察{
返回此.authToken.get（'clients'）
.map（res=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
};
addClient（客户端：客户端）：可观察{
返回此.authToken.post（'clients'，client）
.map（res=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}
getClientById（id）：可观察{
返回此.authToken.get（'clients/'+id）
.map（res=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}
deleteClient（id）：可观察{
返回此.authToken.delete（'clients/'+id）
.map（res=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}
editClientById（客户端：任意）：可观察{
返回此.authToken.patch（'clients/'+client.id，client）
.map（res=>res.json（））
.catch（（error:any）=>Observable.throw（error.json（）.error | |“服务器错误”）；
}

只要您在
init
中声明了
baseApi
，这将简化过程。
您在http调用
this.http.get（this.clientsUrl，options）
中缺少
RequestOptions
，您应该将令牌添加到header@Aravind谢谢你，这是一个完全公平的观点。我这样做了，但它没有将“应用程序”作为内容类型传递，而是重写了默认类型，但是，它仍然不能自动发送Angular2令牌头。您在上面的代码中设置
内容类型
。@Aravind在您的评论后，我更新了我的问题，说明了我是如何更改代码的。您在http调用
this.http.get（this.clientsUrl，options）中缺少
RequestOptions
您应该将令牌添加到header@Aravind谢谢你，这是一个完全公平的观点。我这样做了，它没有将“应用程序”作为内容类型传递，也没有重写默认类型，但是它仍然没有自动发送Angular2令牌头。在上面的代码中，您在哪里设置
内容类型
？@Aravind在您的评论后，我更新了我的问题，说明了我是如何更改代码的。