我如何将一个从http.post返回的简单字符串值设置为Angular5中的变量

Question

I want to take a token from my Restful webservice with http.post. The webservice takes an username and password, if parameters match with any user in database it creates a token and return it as a string. I can send post and take the value as JSON but i want to take it as string. and i wanna use it as variable. And i want to have clear knowledge about http and rest service comunication if anyone can suggest a source it would be very nice to me. Thanks in advance...

i can take it with this but i wanna take it as a variable or a variable inside a class Interface :

export interface Token {
    token: string
}

auth.service.ts :

login (username: string, password: string): Observable<Token[]> {
      this.params = '?username=' + username + '&password=' + password;
      return this.http.post<Token[]>(this.loginURL + this.params, null, httpOptions).do(data => console.log(data));
  }

login.component.ts :

this.authService.login(this.username, this.password).subscribe(data => this.authService.token = data[0]);

UPDATED AND WORKING

I solved it with @SrAxi's help. The Final correct code;

my login.component.ts :

this.authService.login(this.username, this.password).subscribe(
            (data: string) => this.authService.token.token = data,
            (error: any) => console.error(error.message, error.details),() => console.log(this.authService.token.token)
        );

My auth.service.ts :

 login(username: string, password: string): Observable<string> {
        this.params = '?username=' + username + '&password=' + password;
        return this.http.post(this.loginURL + this.params, null, httpOptions)
            .map((response: Token) => response.token) // we navigate in the repsonse directly and fish out the token and return it
            .catch((error: any) => Observable.throw(error));
    }

and my object class :

export class Token {
    private _token: string;


    get token(): string {
        return this._token;
    }

    set token(value: string) {
        this._token = value;
    }
}

Answer 1

You are not mapping the response from your Http call.

login(username: string, password: string): Observable<string> {
    this.params = '?username=' + username + '&password=' + password;
    return this.http.post(this.loginURL + this.params, null, httpOptions)
      .map((response: any) => response.json().token) // we navigate in the repsonse directly and fish out the token and return it
      .catch((error: any) => Observable.throw(error));
  }

With this reworked function you'll be able to map the response and parse it as a JSON or to throw an error that your subscription will catch.

So you could call it like this:

this.authService.login(this.username, this.password).subscribe(
      (data: any) => this.authService.token = data[0],
      (error: any) => console.error(error.message, error.details)
    );

Answer 2

In your auth-service do the following

login (username: string, password: string): Observable<Token> {
  this.params = '?username=' + username + '&password=' + password;
  return this.http.post(this.loginURL + this.params, null, httpOptions).map((res: Token) => res);
  }

Then in your login-component

    ...
    token: Token = null;
    this.authService.login(this.username, this.password)
   .subscribe(token => this.token = token);
    ...