CODEWITHSUNDEEP
angularrxjs
Cholewka
Cholewka

Reputation: 963

Handling BehaviorSubject changes doesn't work

I've encountered a problem with creating service for authentication and users. I've got this component as a header navigation of my app:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';

import { AuthenticationService } from '@services';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit, OnDestroy {
  sidebarEnabled: boolean = false;
  logged: boolean = false;

  logSubscribtion: any;

  constructor(
    private authService: AuthenticationService,
    private router: Router
  ) {}

  ngOnInit(): void {
    this.logSubscribtion = this.authService.getUser().subscribe((logged) => {
      if (logged !== null) return (this.logged = true);
      this.logged = false;
    });
  }

  ngOnDestroy(): void {
    this.logSubscribtion.unsubscribe();
  }

  toggleSidebar(): void {
    this.sidebarEnabled = !this.sidebarEnabled;
    console.log(this.logged);
    console.log(this.authService.isLogged());
  }

  logout(): void {
    this.authService.signOut();
    this.router.navigateByUrl('/auth/login');
  }
}

And here's the code of HTML component that I want to change when logged off:

<div id="nav-container">
  <div class="wrapper">
    <nav id="main-nav">
      ...
      <ul class="nav-menu">
        <li class="nav-item" *ngIf="logged == false">
          <a
            routerLink="/auth/login"
            routerLinkActive="active"
            title="Sign in"
            class="nav-link"
          >
            Sign in
          </a>
        </li>
        <li class="nav-item" *ngIf="logged == false">
          <a
            routerLink="/auth/register"
            routerLinkActive="active"
            title="Sign up"
            class="nav-button-link"
          >
            Create free account
          </a>
        </li>
        <li class="nav-item" *ngIf="logged">
          <a
            routerLink="/panel/dashboard"
            routerLinkActive="active"
            title="Dashboard"
            class="nav-button-link"
          >
            My account
          </a>
        </li>
        <li class="nav-item" *ngIf="logged">
          <a (click)="logout()" title="Logout" class="nav-link">
            Logout
          </a>
        </li>
      </ul>
      ...
    </nav>
  </div>
</div>

But when I click on logout link, the header still shows me the "My account" and "Logout" links.

Also, here's the getUser method from auth service:

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  private user$ = new BehaviorSubject<User | null>(null);

  constructor(private http: HttpClient, private tokenStorage: TokenStorage) {}

  setUser(user: User | null): void {
    if (user) this.user$.next(user);
  }

  getUser(): Observable<User | null> {
    return this.user$.asObservable();
  }

  signOut(): void {
    this.tokenStorage.signOut();
    this.setUser(null);
  }
}

Upvotes: 0

Views: 134

Answers (1)

Aakash Garg
Aakash Garg

Reputation: 10969

From your signOut method you are calling setUser with null Value. And in setUser you have check if(user), this condition will fail. Hence it will not call subject.next. Change your signout method to :- 

  signOut(): void {
    this.tokenStorage.signOut();
    this.user$.next(null);
  }

Upvotes: 2

Related Questions