Angular Hide Navbar Menu со страницы входа - PullRequest
Новая
       9

Angular Hide Navbar Menu со страницы входа

0 голосов
/ 31 октября 2018

Я реализовал навигационную панель показать / скрыть для входа в систему / выхода из системы для пользователя в моем приложении angular 5, это моя справка

https://loiane.com/2017/08/angular-hide-navbar-login-page/

это нормально работает в моем локальном компьютере, но не работает при развертывании. В чем может быть проблема. Я использую код как есть с небольшими изменениями.

Auth Gard 

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): 
Observable<boolean> {

    return this.authService.isLoggedIn.pipe(
        take(1),
        map((isLoggedIn: boolean) => {
          if (!isLoggedIn) {
           this.router.navigate(['/login']);
           return false;
          }
          return true;
        })
      );

  }

Аутентификация 

  private loggedIn: BehaviorSubject<boolean> = new 
BehaviorSubject<boolean>(false);

  get isLoggedIn() {
    this.login();
    return this.loggedIn.asObservable();
  }

  constructor(private router: Router, private sessionService: 
SessionService) {}

  login() {
    const userSession = this.sessionService.get('userEmail');
    this.loggedIn.next(userSession !== null ? true : false);
  }

  logout() {
    this.loggedIn.next(false);
    this.router.navigate(['/login']);
  }

Компонент заголовка 

isLoggedIn$: Observable<boolean>;
  userImage: string;

  constructor(private sessionService: SessionService, private authService: 
AuthService, private route: ActivatedRoute) {
    this.route.params.subscribe(val => {
      this.isLoggedIn$ = this.authService.isLoggedIn;
   });
  }

  ngOnInit() {

    this.isLoggedIn$ = this.authService.isLoggedIn;
    const img = this.sessionService.get('userImage');
    this.userImage = img === null ? '' : <string>img;

  }

  toggleMenu() {
    this.showMenu = !this.showMenu;
    console.log(this.showMenu);
  }

Заголовок HTML 

<ul class="header_main_nav condensed" *ngIf="isLoggedIn$.source._value">
      <li class="routlink">
        <a [routerLink]="['/agileBomRefLnk']" routerLinkActive="active">
          <span class="glyphicon glyphicon-search"></span>
          <span class="link-text">Agile BOM</span>
        </a>
      </li>
</ul>

1 Ответ

0 голосов
/ 31 октября 2018

По-простому, с минимальными изменениями 

    merge login component with AppComponent  and put *ngIf on 
    <div *ngIf="!loginPage">
     <app-header [(loginbutton)]="loginPage"></app-header><!-- [(loginbutton)] is an output to trigger the boolean "loginPage" -->

     <router-outlet></router-outlet>
</div>
 <div *ngIf="!loginPage">
LoginCode...
</div>

Я надеюсь, что это будет полезно для вас ...

...