根据用户身份验证状态动态更新菜单链接

Question

我正在构建一个有角度的应用程序。许多菜单链接是静态和公开的，用户无需任何身份验证即可使用。

但有些确实需要用户登录。

菜单本身位于 SidenavComponent 中，它为要显示的各种链接创建一个对象数组。

我想要弄清楚如何做是让 SidenavComponent 在用户进行身份验证时重新构建/初始化它的墨水列表（通过 LoginComponent 和 AuthService 类）。

我尝试将实际的 User 对象设为可观察对象

user: Observable<User | null>;

在我的 AuthService 控制器内。

然后在我的 SidenavComponent 中，我订阅了用户可观察的，这样当状态改变时我可以强制组件重建它的列表。

列表本身也是一个

Observable<any> 

这样，当内容发生变化时，它就会在 DOM 中重新绘制自身。

但我最终发现它在登录或注销时都不会重新绘制自身。而且 Logout 更难构建，因为很难将可观察值设置为 null。

有人对如何做到这一点有建议吗？我没有办法将用户从登录组件传递到 sidenav 组件，所以我不确定是否存在其他选项。

Answer 1

认证服务

  private isUserAuthenticatedSubject = new BehaviorSubject<boolean>(false);

  isAuthenticated$: Observable<boolean> = this.isUserAuthenticatedSubject.asObservable();

  login() {
    // Your login logic here
    this.isUserAuthenticatedSubject.next(true);
  }

  logout() {
    // Your logout logic here
    this.isUserAuthenticatedSubject.next(false);
  }

当你像这样在 sidenav 组件中获得可观察值时，你可以设置可观察值

   isAuthenticated$: Observable<boolean>;
   ngOnInit(): void {
      this.isAuthenticated$ = this.authService.isAuthenticated$;
   }

您可以这样做来使用新的菜单项更新 DOM。

  <li><a routerLink="/">Home</a></li>
  <li><a routerLink="/about">About</a></li>
  <li *ngIf="(isAuthenticated$ | async)">
    <a routerLink="/profile">Profile</a>
  </li>
  </li>