Subscribe RxJS Observable twice. Getting value of response two times

Question

Suppose I have an Angular 2 Service. createToken function gets log in token from server:

//ANGULAR 2 SERVICE:
//login to application
createToken(email: string, password: string) {
    let headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    });

    let data = 'username=' + email + '&password=' + password + '&grant_type=password';

    this.http.post(this.loginURL, data, { headers: headers })
        .map(response => response.json())
        .subscribe(
        response => {
            localStorage.setItem(this.storageTokenKey, response.access_token);
            console.log("Token: " + response.access_token);
        },
        error => {
            console.log(error.text());
        });
}

I need to do two things with my token:

1. Save it to local storage (which will be done every time, so it should be in service)
2. Do some operations on it in Component (display it or whatever)

In order to do this (as far as I understand Observables), my createToken function has to return Observable<> to allow Component that will use it to call its .subscribe method to do some operations on result.

Unfortunately, as I see from RxJS documentation, .subscribe method doesn't return Observable<>

What should I do then to be able to call .subscribe() method twice?

Answer 1

You can use the do() operator:

Perform a side effect for every emission on the source Observable, but return an Observable that is identical to the source.

return this.http.post(this.loginURL, data, { headers: headers })
    .map(response => response.json())
    .do(response => {
        localStorage.setItem(this.storageTokenKey, response.access_token);
        console.log("Token: " + response.access_token);
    });