Getting local storage value inside observable

Ionic Framework ionic-v3
1

I have an observable retrieving a token. I’m then saving that token into my local storage, then of which I’m calling into my interceptor. The issue is, when the local storage value is set inside the login observable, I can’t retrieve it. If I set a random token value outside of it, I can get it inside my interceptor. The issue is somehow retrieving that token value inside of my observable. I’ve also used this.storage.ready to wait until the local storage is ready and that doesn’t work either. I’m all out of ideas. Any help would be appreciated! I should also note that I’m just getting back null for the token value, even when logging in. I’m not using angular 4.3.1, I’m still using HttpModule from @angular/http.

auth.ts

login(userName: string, password: string, route: string = null): any {
     this.storage.set('tokens', 'able to retrieve this token value inside interceptor');
      this.doLogin(userName, password)
      .subscribe(response => {
        let token:string = JSON.stringify(response.access_token);
        this.storage.set('token', token)
      }
      }

interceptor.ts

constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, public storage: Storage) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return super.request(url, options);
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
  return Observable.fromPromise(
    this.getRequestOptionArgs(options)
  ).mergeMap((options) => {
    return super.get(url, options)
  })
  }
private getRequestOptionArgs(options?: RequestOptionsArgs) {
    return this.storage.get('token').then((token) => {
      console.log(token, 'token for the get')
      if (options == null) {
        options = new RequestOptions();
      }

      if (options.headers == null) {
        options.headers = new Headers();
      }

      if (token !== null) {
        options.headers.append('Authorization', 'Bearer ' + token);
      }
      options.headers.append('Content-Type', 'application/json');

      return options;
    });
  }
2

My takeaway from this is that there wasn’t really any problem with Angular 4.3’s HttpClient in the first place.

Is it possible that you have a race condition after you are calling storage.set()? set() returns a Promise that resolves once the value has actually been stored, and you’re not waiting on it but instead barging ahead and calling doLogin().

3

Thanks for the reply! I’m not using the HttpClient. I don’t see any race condition after that’s being called or anything that would interfere with that promise.

4

You were, though, and had what sounds to me like a very similar problem, and were convinced to give up on it. I’m still not convinced that there are any fundamental problems with using it in an Ionic app.

I guess I didn’t say what I was trying to say clearly, then. You have no idea when your call to set() has actually taken effect, because you are ignoring set()'s return value. If doLogin() indirectly results in getRequestOptionArgs() getting called, it would seem probable to me that you are trying to get() something before it was actually set.

5

Ok sorry for the confusion there! Also, you are 100% right. So then, might be a dumb question but how would I go about calling my interceptor after my auth service?

6

It is far from a dumb question, and I’m not entirely sure what I think is the best way to go about it. What I am currently doing is exposing a ready Promise in the auth service, and having anybody calling anything relying on the interceptor wait on that. I’m not particularly happy about it, though.

7

JavaScript ™.

(Additional characters)

1 Like
8

me:JavaScript::Sisyphus:rock

9

If you’re having anything relying on the auth service to be ready first, would it make more sense to place the ready promise inside the interceptor like so …

this.auth.login.ready().then(() => {

 })

and have everything inside the interceptor wrapped in that?