Angular Observer, если пользователь вошел в систему или нет

Question

Мой login.component устанавливает элемент локального хранилища с токеном.Я хотел бы, чтобы мой nav.component всегда знал об этом и реагировал всякий раз, когда токен был там или удален, и я хотел бы, чтобы мой Auth содержал Observable.Я хотел бы, чтобы мой nav.component подписался на Observable.Я думаю, что я почти на месте, но мне нужно последнее руководство.На данный момент он не меняет никаких свойств в моей навигации.

На данный момент я не могу наблюдать какие-либо изменения, сделанные в localalstorage.Это всегда возвращает ложь.Я могу установить для loggedIn значение true, и моя навигация будет реагировать на это, поэтому я думаю, что это как-то связано с Observable в Auth.

Это мой app.component, который содержит навигацию.

<app-nav></app-nav>
<div> 
    <router-outlet></router-outlet>
</div>

Мой nav-компонент:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})

export class NavComponent implements OnInit {

  public isLoggedIn: Boolean;

  constructor(
    private auth: AuthService, private router: Router
    ) {}

  ngOnInit() {
    this.auth.isLoggedIn().subscribe(
      mes =>{
        this.isLoggedIn = mes;
      }
    );
  }
  handleAction(){
    console.log(this.isLoggedIn);
  }
  logoutUser(){
    this.auth.logoutUser();
  }
}

И мой auth.service:

import { Injectable, EventEmitter, Output } from '@angular/core';
import { HttpClient, HttpHeaderResponse, HttpErrorResponse} from '@angular/common/http';
import {Subject, Observable, EMPTY, throwError,} from 'rxjs';
import { Router } from '@angular/router';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class AuthService {  
  private apiroot = "My api root";
  public loggedIn = false;
  logger = new Subject<boolean>();

  constructor(
    private http: HttpClient,
    private router : Router
  ) { }
  isLoggedIn(): Observable<boolean> {
    return this.logger.asObservable();
  }
  loggedInStatus(){
    //Used for guards
    return !!localStorage.getItem('token');
  }
  registerUser(user){
    return this.http.post<any>(this.apiroot + "register", user)
      .pipe(catchError(this.errorHandler))
  }
  resetPassword(user){
    return this.http.post<any>(this.apiroot + 'resetpassword', user)
      .pipe(catchError(this.errorHandler))
  }
  loginUser(user){
    // this.loggedIn = true;
    this.logger.next(this.loggedIn);
    return this.http.post<any>(this.apiroot + "login", user)
  }
  logoutUser(){
    localStorage.removeItem('token');
    this.loggedIn = false;
    this.logger.next(this.loggedIn);
    this.router.navigate(['/']);
  }
}