Question

我正在尝试在登录服务中将Http的使用替换为HttpClient。

当我使用Http获取令牌时，我可以简单地使用response.json().token，但是HttpClient没有json（）方法。我在帖子响应的标题中搜索了令牌，但我得到的只是键，杂注，内容类型和过期时间，它们没有值。

令牌是由服务器发送的，所以这不是问题，否则使用http方法时我也不会得到令牌。我也在响应的正文中寻找令牌，但是当我打印出正文时，我得到了[Object object]，body.toString（）也不起作用。有人可以帮忙吗？这是我的代码：

  login(username: string, password: string): Observable<boolean> {
    return this.http.post(this.authUrl, JSON.stringify({username: username, password: password}), {headers: this.headers, observe: 'response'}).map((response: HttpResponse<any>) => {
            // login successful if there's a jwt token in the response
            // let keys: string[] = response.body();
            // for( let i= 0; i < keys.length; i++){
            //   console.log("key: " + keys[i]) + " " + response.headers.get(keys[i]);
            // }
            let token: any = response.body;
            console.log("token is: " + token);
            if (token) {
                // store username and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));
                this.loggedIn.next(true);
                // return true to indicate successful login
                return true;
            } else {
                // return false to indicate failed login
                return false;
            }
        }).catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}

Answer 1

我通过使用pipe方法使其工作（更多信息在这里：http://jasonwatmore.com/post/2018/05/23/angular-6-jwt-authentication-example-tutorial）

在这里输入正确的代码。

  login(username: string, password: string): Observable<boolean> {
    return this.http.post<any>(this.authUrl, JSON.stringify({username: username, password: password}), {headers: this.headers}).pipe(
      map((response:any) => {
            let token: any = response.token;
            if (token) {
                // store username and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));
                this.loggedIn.next(true);
                // return true to indicate successful login
                return true;
            } else {
                // return false to indicate failed login
                return false;
            }
        }),
        catchError((error:any) => Observable.throw(error.json().error || 'Server error'))
      );
}

Answer 2

我发现了访问响应对象的另一种方法，您需要进行两项更改，在服务器端，将令牌放入数组中：

if(myuser.user_password!==userData.user_password){
                    res.status(401).send("Invalid password");
                }else{
                    let payload = { subject: myuser.user_login };
                    let token = jwt.sign(payload,"mySecretKey", {expiresIn: "15min"});
                    res.status(200).send([{ token, myuser }]); 
                }

然后在客户端，您将可以像这样访问数组：

this.auth.getObject(this.form.value).subscribe(
      data=>{
        localStorage.setItem("token",data[0].token);
        this.router.navigate(["/home"], { skipLocationChange: true});

现在您将可以访问令牌或任何其他数据。

使用HttpClient时如何从Post响应中检索JWT令牌

2 个答案: