我刚刚完成设置Angular2-Token身份验证,并且从我在文档中看到的内容,它应该在标题中发送client
uid
expiry
和token
每个请求,但我注意到我总是在后端收到我的默认Sign In
响应。
My 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中测试了端点,响应正如我所料。我在标题中发送了access_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-Token应该按照this issue
中的解释来解决它我是不正确地进行此操作,还是我必须制作某种拦截器以预先添加所有标题?
更新代码
感谢下面的评论,我意识到我需要传递标题。我修改它以使用下面的代码片段,但Angular2-Token应该自动发送标题。我应该遵循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'));
};
答案 0 :(得分:2)
对于遇到此问题的任何人,我的问题是我没有使用Angular2-Token提供的HTTP Wrapper。
这实际上使我确保正确的令牌非常简单,并且没有重复的标题。
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'));
}
只要您在baseApi
中说明了init
,这将简化流程。
答案 1 :(得分:1)
在options
设置withCredentials
至真
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'))