Issue with synchronous operation somewhere down a chain RxJS observables subscription - rxjs

Question

I have a synchronous operation that is run somewhere down a chain of RxJS observables subscription.
This synchronous operation sets data on local storage (synchronous) that is required further down the chain in order to perform a http call (asynchronous/observable).
Here is a summary of the sequence:
Async operation returning an observable called
Sync operation setting data on local storage
Async operation using local storage date and returning an observable
Final subscription
By the time 3. is called, it seems data is not available on local storage - supposed to have been set by 2.
The above is just a simplification of the issue.
Here is the full code (in typescript):
This is called by a form (located in a component):
resetPassword() {
this.submitted = true;
if (this.passwordResetForm.valid) {
this.route.params.map(params => params['userAccountToken'])
.switchMap(userAccountToken => {
return Observable.concat(
this.userAccountService.resetPassword(Object.assign(this.passwordResetForm.value.passwordReset, {token: userAccountToken})),
this.sessionService.signinByUserAccountToken(userAccountToken)
);
})
//Will require the UserAccountResolve below which will itself fail because 'x-auth-token' is not yet available on local storage
.subscribe(() => this.router.navigate(['/dashboard']));
}
}
from UserAccountService:
resetPassword(passwordResetForm) {
return this.http.put(this.urls.USER_ACCOUNT.RESET_PASSWORD, passwordResetForm);
}
from SessionService:
signinByUserAccountToken(userAccountToken: string) {
return this.http.post(format(this.urls.AUTHENTICATION.SIGNIN_BY_USER_ACCOUNT_TOKEN, {userAccountToken}), null)
.do(response => this.setPersonalInfo(response.headers.get('x-auth-token')));
}
private setPersonalInfo(sessionToken) {
localStorage.setItem('authenticated', 'true');
localStorage.setItem('sessionToken', sessionToken);
this.authenticated$.next(true);
}
UserAccountResolve:
import {Injectable} from '#angular/core';
import {Resolve, ActivatedRouteSnapshot} from '#angular/router';
import {UserAccount} from '../shared/models/useraccount.model';
import {AuthenticatedHttpClient} from '../shared/services/authenticated-http-client.service';
import {URLS} from '../urls/URLS';
#Injectable()
export class UserAccountResolve implements Resolve<UserAccount> {
private urls;
constructor(private authenticatedHttpClient: AuthenticatedHttpClient) {
this.urls = URLS;
}
resolve(route: ActivatedRouteSnapshot) {
//Will fail
return this.authenticatedHttpClient.get(this.urls.USER_ACCOUNT.USER_ACCOUNT)
.map(response => response.json());
}
}
AuthenticatedHttpClient:
#Injectable()
export class AuthenticatedHttpClient {
static createAuthorizationHeader(headers: Headers) {
//Is not available on local storage when required
headers.append('x-auth-token', localStorage.getItem('sessionToken'));
}
constructor(private http: Http) {
}
get(url) {
let headers = new Headers();
AuthenticatedHttpClient.createAuthorizationHeader(headers);
return this.http.get(url, {
headers: headers
});
}
...
Can someone please help?

Answer 1

If I understand your Problem correctly, you want to delay redirecting your user until both HTTP requests have been done. Currently you subscribe to your Observable, causing the redirect to happen as soon as it observes the first result, which is in this case the result of userAccountService.resetPassword().
If you just want to wait for all requests to finish, you can subscribe onCompleted like this:
observable.subscribe(
_ => {},
err => { /* Don't forget to handle errors */ },
() => this.router.navigate(['/dashboard']))
However having an Observable whose results you do not care about is a sign, that your App might need a refactor one of these days.