Angular2-Token 未发送 headers

Question

我刚刚完成 Angular2-Token 身份验证的设置，根据我在文档中看到的内容，它应该发送 client uid expiry 和 token 在每个请求的 headers 中，但我注意到我总是在 back-end.

上得到默认的 Sign In 响应

我的Angular(4)服务很简单

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'));

  };

并且在组件中：

export class ClientComponent implements OnInit {

  constructor(private clientService: ClientService) { }
  clients: Client[];

  ngOnInit() {
    this.getClients();
  }

  getClients() {
    this.clientService.getClients()
      .subscribe(
        clients => this.clients = clients,
        err => {
          console.log(err);
        }
      );
  }

}

我还有一个包含时间戳 + ID 的通用模型，因为我不确定它将如何处理响应。

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

我已经在 POSTMAN 中测试了端点，响应如我所料。我在headers中发送了access_tokenclient和uid，验证没问题。

当我检查网络时，我没有看到 headers 在请求中传递。

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-Token 应该可以解决它，如 this issue

中所述

我是不是处理不当，还是我必须制作某种拦截器来预先添加所有 headers？

更新代码

感谢下面的评论，我意识到我需要通过 headers。我修改了它以使用下面的代码片段，但是 Angular2-Token 应该会自动发送 headers。我应该遵循 JWT-Token 逻辑还是 Angular2-token？

 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'));

};

Answer 1

在您的 options 中将 withCredentials 设置为 true

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

也将您的headers一一附加

    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'))

Answer 2

对于遇到此问题的任何人，我的问题是我没有使用 Angular2-Token 提供的 HTTP Wrapper。

这实际上让我非常简单地确保正确的令牌，并且没有重复 headers。

  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'));
  }

只要您在 init 中声明了 baseApi，这将简化流程。

Angular2-Token 未发送 headers

Angular2-Token not sending headers

access-token

angular