处理 BehaviorSubject 更改不起作用

Question

我在为身份验证和用户创建服务时遇到了问题。 我将此组件作为我的应用程序的 header 导航：

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>

但是当我点击注销链接时，header 仍然显示“我的帐户”和“注销”链接。

此外，这是来自 auth 服务的 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);
  }
}

Answer 1

从您的 signOut 方法中，您使用 null 值调用 setUser。 在 setUser 中你检查了 if(user)，这个条件将失败。 因此它不会调用 subject.next。 将您的注销方法更改为：-

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