作者:让牙齿晒晒太阳诱惑 | 来源:互联网 | 2022-12-08 11:16
我打电话给我的Web API登录.该调用返回一个JSON对象,该对象具有一个名为token的属性.
在我的AuthService中,我有以下功能:
login(model: any) {
return this.http.post('http://localhost:5000/api/auth.login', model, httpOptions).pipe(map((response: Response) => {
console.log(response);
if (response) {
// localStorage.setItem('token', jwtHelper.decodeToken(response.token));
// this.decodedToken = jwtHelper.decodeToken(response.token);
// this.userToken = response.token;
}
}));
}
以下是console.log响应的样子:
{token: "eyJhbGciOiJIUzXxMiIsInR5cCI6IkpXVCJ9.eyJuYW1laWQiO…CDNojrJEwmuIbLOjhCxzDwls22SA4Whpklh7zPFaR6g_1iQcQ"}
我可以让这个函数没有返回调用它的组件,但为了在本地存储和一些其他属性中设置令牌,我使用管道,然后映射.它是否正确?我尝试访问它时,response.token会抛出一个错误,因为typescript不知道响应中的token属性.
1> Martin Adáme..:
要摆脱TS错误,您可以引入根据您的响应设计的新界面.此外,如果您只想对值执行某些操作,则最好使用tap
运算符(以前称为do
):
interface MyApiResponse {
token: string;
}
login(model: any) {
return this.http.post('http://localhost:5000/api/auth.login', model, httpOptions)
.pipe(tap((response: MyApiResponse) => {
console.log(response.token);
if (response) {
// localStorage.setItem('token', jwtHelper.decodeToken(response.token));
// this.decodedToken = jwtHelper.decodeToken(response.token);
// this.userToken = response.token;
}
}));
}
如果您只想返回令牌(因此您希望改变响应),请map
改用(如您所知).