Dynamic update menu links based on user auth status

Question

I am building an angular app. Many of the menu links are static and public and available to users with out any authentication.

But some do require a user to be logged in.

The menu itself is in a SidenavComponent where it creates an array of objects for the various links to show.

What I am trying to figure out how to do is get the SidenavComponent to re-build/init it's list of inks when the user authenticates (via the LoginComponent and the AuthService class).

I tried making the actual User object an observable

user: Observable<User | null>;

inside my AuthService controller.

Then inside my SidenavComponent I subscribed to the user observable with the idea that when state changes I can force the component to rebuild it's list.

And the list itself is also an

Observable<any> 

so that hopefully when the content changes it will redraw itself in the DOM.

But what I end up finding is that it doesn't redraw itself either on login or logout. And Logout is harder to build because it's hard to set an observable to null.

Does any one have suggestions of how to do this? I don't have a way to pass the user from the login component to the sidenav component, so I am not sure what other options exist.

Answer 1

Auth Service

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

When you get the observable in your sidenav component like this, you can set the obvervable

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

You could possibly do this to update the DOM with new menu items.

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