Обработка изменений BehaviorSubject не работает - PullRequest
Новая
       3

Обработка изменений BehaviorSubject не работает

0 голосов
/ 28 мая 2020

У меня возникла проблема с созданием сервиса для аутентификации и пользователей. У меня есть этот компонент в качестве заголовка навигации моего приложения: 

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');
  }
}

И вот код компонента HTML, который я хочу изменить при выходе из системы: 

<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>

Но когда я нажимаю ссылку выхода, в заголовке по-прежнему отображаются ссылки «Моя учетная запись» и «Выход».

Кроме того, вот метод getUser из службы проверки подлинности: 

@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);
  }
}

1 Ответ

2 голосов
/ 28 мая 2020

Из вашего метода signOut вы вызываете setUser с нулевым значением. И в setUser вы должны проверить, не выполняется ли (пользователь) это условие. Следовательно, он не будет вызывать subject.next. Измените метод выхода на: - 

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