rxjs observable angular 2 on localstorage change

Question

I am trying to create an observable that returns values when changes to a localStorage variable happens. My subscriber is not getting the new values upon changes to localStorage (or for that matter an in memory variable).

navbar.component.js

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';

/**
 * This class represents the navigation bar component.
 */
@Component({
  moduleId: module.id,
  selector: 'sd-navbar',
  templateUrl: 'navbar.component.html',
  styleUrls: ['navbar.component.css'],
  providers: [UserService]
})

export class NavbarComponent implements OnInit {
  loggedIn: boolean;
  constructor(private us: UserService) { }

  ngOnInit() {
    this.us.isLoggedIn().subscribe(loggedIn => {
      this.loggedIn = loggedIn;
    });
  }
}

auth.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from '../shared/services/user.service';

/**
 * This class represents the lazy loaded AuthComponent.
 */
@Component({
  moduleId: module.id,
  selector: 'sd-auth',
  templateUrl: 'auth.component.html',
  styleUrls: ['auth.component.css'],
  providers: [UserService]
})
export class AuthComponent implements OnInit {
  authParams = {
    provider: '',
    params: {}
  };

  constructor(private route: ActivatedRoute, private us: UserService) { }
  ngOnInit() {
    this.route.params.forEach((param) => {
      this.authParams.provider = param.authprovider;
    });

    this.route.queryParams.forEach((queryParams) => {
      this.authParams.params = queryParams;
    });

    this.us.logIn("google", JSON.stringify(this.authParams));

    console.log(JSON.parse(localStorage.getItem('authParams')));

  }
}

user.service.ts

// user.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';

@Injectable()
export class UserService {
  private loggedIn = false;
  private logger = new Observable<boolean>((observer: Subscriber<boolean>) => {
    observer.next(this.loggedIn);
  });
  constructor() {
    if (localStorage.getItem('authParams')) {
      this.loggedIn = !!JSON.parse(localStorage.getItem('authParams')).params.id_token;
    } else {
      this.loggedIn = false;
    }
  }

  logIn(provider: string, providerResponse: string) {
    localStorage.setItem('authParams', providerResponse);
    this.loggedIn = true;
  }

  isLoggedIn(): Observable<boolean> {
    return this.logger;
  }

  logOut() {
    localStorage.removeItem('authParams');
    this.loggedIn = false;
  }
}

Flow looks like

Step 1- Navbar subscribes to UserService (Gets the default value of loggedIn=false) Step 2 - AuthComponent updates UserService (sets loggedIn = true)

My subscription in Navbar is not getting updated. What am I missing here. Do I need to put something in the logIn method of UserService like event emitter?

Answer 1

To be more precise, use BehaviourSubject from import { BehaviorSubject } from 'rxjs/BehaviorSubject';

For ex:

@Injectable()
export class UserService {

  public username = new BehaviorSubject<string>('');
  public preferredLanguage = new BehaviorSubject<string>('');
  public preferredTimezone = new BehaviorSubject<string>('');

  constructor(
    private router: Router,
    private jwtTokenService: JwtTokenService
  ) {
    let token: string = localStorage.getItem('token'); // handled for page hard refresh event
    if (token != null) {
      this.decode(token);
    }
  }

  private decode(token: string) {
    let jwt: any = this.jwtTokenService.decodeToken(token);
    this.username.next(jwt['sub']);
    this.preferredLanguage.next(jwt['preferredLanguage']);
    this.preferredTimezone.next(jwt['preferredTimezone']);
  }

  public setToken(token: any) {
    localStorage.setItem('auth_token', token);
    this.decode(token);
  }

}

and to learn difference between BehaviorSubject and Observable: Angular 2 - Behavior Subject vs Observable?

Answer 2

What you want is a Subject. Check out the docs here (https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/subject.md)

For a quick example, something like this:

export class UserService {
  ...
  private logger = new Subject<boolean>();
  ...

  isLoggedIn(): Observable<boolean> {
    return this.logger.asObservable();
  }

  logIn(provider: string, providerResponse: string) {
    localStorage.setItem('authParams', providerResponse);
    this.loggedIn = true;
    this.logger.next(this.loggedIn);
  }

  logOut() {
    localStorage.removeItem('authParams');
    this.loggedIn = false;
    this.logger.next(this.loggedIn);
  }
...