Angular2令牌不发送头

Question

我刚刚完成设置Angular2令牌身份验证，并从我的文档看，应该在发送每个请求的头clientuidexpiry和token，但我注意到我总是在后端获得我的默认Sign In响应。

我的角度（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中测试了端点，响应如我所料。我在标题中发送它access_tokenclient和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 

我一直在寻找到如何预先考虑他们-every-单呼，但我认为Angular2令牌应该解决它作为this issue

我要对这个解释不当，或我将不得不使某种拦截器预先添加所有标题？

更新的代码

由于下面的评论，我意识到我需要传递的标头。我已经修改了它与下面的代码片段工作，但Angular2令牌应该自动发送头。我应该遵循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

对于任何人谁碰到这个来的时候，我的问题是，我没有使用HTTP Wrapper由Angular2-Token提供。

这实际上使得它非常简单，我以确保适当的标记，也没有重复的标题。

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。

Answer 2

在你options设置withCredentials为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'))