登录-Angular 8时隐藏可选的导航栏菜单

Question

I'm trying to hide some of my navbar menus after I logged in.

Here is my navbar menus

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active"><a class="nav-link" routerLink="books">Books</a></li> 
  <!--Hide this link-->  <li class="nav-item"><a class="nav-link" routerLink="sign-in">Sign In</a></li> 
  <!--Hide this link-->  <li class="nav-item"><a class="nav-link" routerLink="sign-up">Sign Up</a></li> 
  </ul>
</div>

Is there anyway to hide these commented links that I want to hide? here is my SignIn Component Type Script

export class SignInComponent implements OnInit {

  email: string;
  password: string;

  constructor(public auth: AuthService) { }

  ngOnInit() {
  }

  login(){
    this.auth.login(this.email, this.password);
    this.email = this.password = '';
  }

}

Auth Service Type Script

  login(email: string, password: string){
    this.afAuth.auth.signInWithEmailAndPassword(email, password).then(
      value => {
        console.log('Success!', value);
        this.router.navigate(['dashboard']);
      }
    ).catch(err=>{
      console.log('Something went wrong:',err.message);
      this.router.navigate(['sign-up']);
    })
  }

** If this will help, here is my Header Type Script

export class HeaderComponent implements OnInit {

  title = 'Book List App';

  constructor() { }

  ngOnInit() {
  }

}

Thank you.

Answer 1

Return a boolean value true/false based on the success,

boolean login(email: string, password: string){
    this.afAuth.auth.signInWithEmailAndPassword(email, password).then(
      value => {
        console.log('Success!', value);
        this.router.navigate(['dashboard']);
        return true;
      }
    ).catch(err=>{
      console.log('Something went wrong:',err.message);
      this.router.navigate(['sign-up']);
      return false;
    })
  }

and assign to a variable in your component as,

this.loggedIn =   this.auth.login(this.email, this.password);;

bind the variable in your HTML

<li class="nav-item" *ngIf="loggedIn"><a class="nav-link" routerLink="sign-in">Sign In</a></li> 
<li class="nav-item"  *ngIf="loggedIn"><a class="nav-link" routerLink="sign-up">Sign Up</a></li> 

Answer 2

You can save to session storage state of login or not.

login(email: string, password: string){
        this.afAuth.auth.signInWithEmailAndPassword(email, password).then(
          value => {
            sessionStorage.setItem("loggedIn", email);
            console.log('Success!', value);
            this.router.navigate(['dashboard']);
          }
        ).catch(err=>{
          console.log('Something went wrong:',err.message);
          this.router.navigate(['sign-up']);
        })
      }

And add a variable flag to check logged in or not

export class HeaderComponent implements OnInit {

  title = 'Book List App';

  isLoggedIn : boolean;
  constructor() { }

  ngOnInit() {
      isLoggedIn = sessionStorage.getItem("loggedIn") != undefined;
  }

}

Update html

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active"><a class="nav-link" routerLink="books">Books</a></li> 
  <!--Hide this link-->  <li *ngIf="isLoggedIn" class="nav-item"><a class="nav-link" routerLink="sign-in">Sign In</a></li> 
  <!--Hide this link-->  <li *ngIf="isLoggedIn" class="nav-item"><a class="nav-link" routerLink="sign-up">Sign Up</a></li> 
  </ul>
</div>

Answer 3

You are using angular firebase, so you can listen to the authState , which returns you an observable of firebase.User when logged in or null when not logged in. It emits every time when the auth state changes. You can use the auth state in a service, store it in a variable so that it is usable all over the app. Components then subscribe to the observable.

Service:

import { User } from 'firebase';

// ...

user$: Observable<User>;

constructor(...) {
   this.user$ = this.afAuth.authState;
}

Component:

import { User } from 'firebase';
import { AuthService } from '....'

// ...

user$: Observable<User>;

contructor(private authService: AuthService) { 
  this.user$ = this.authService.user$;
}

html:

<div *ngIf="!user$ | async">...</div> 
<div *ngIf="user$ | async">...</div>

You can also use *ngIf ... else if you don't want two *ngIf 's.