Как получить токен JWT из ответа Post при использовании HttpClient

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

Я нашел другой способ доступа к объекту ответа, вам нужно два изменения, на стороне сервера поместите токен в массив:

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

теперь у вас будет доступ к токену или любым другим данным.

Answer 2

Я сделал это с помощью метода трубы (подробнее здесь: 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'))
      );
}