Угловые 7 маршрутов Защита не работает

Question

Я пытался работать над защитой маршрута в Angular 7, но она не работала. Код, который я попробовал, приведен ниже. Может кто-нибудь помочь мне с тем, что может пойти не так? Там нет ошибок, но я не получаю желаемый результат либо. Я пытаюсь скрыть кнопку входа в систему после ввода имени пользователя и пароля.

auth.guard.ts

import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivate,
  Router,
  RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';

import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.authService.isLoggedIn
      .pipe(
        take(),
        map((isLoggedIn: boolean) => {
          if (!isLoggedIn){
            this.router.navigate(['']);
            // console.log("inside 29");
            return false;
          }
          this.router.navigate(['/search']);
          return true;
        });
      );
  }
}

auth.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { User } from '../Models/User/user';

@Injectable()
export class AuthService {
  private loggedIn = new BehaviorSubject<boolean>(false); // {1}

  get isLoggedIn() {

    return this.loggedIn.asObservable(); // {2}
  }

  constructor(
    private router: Router
  ) {}

  login(user: User){
    if (user.username !== '' && user.password !== '' ) { // {3}
      this.loggedIn=true;
      this.router.navigate(['/search']);
      console.log(this.loggedIn)

    }
  }

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

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

<li class="nav-item" *ngIf="IsLoggedIn()">
                    <a class="nav-link" (click)="openDialog()" >Login</a>
</li>


IsLoggedIn(): boolean {
     this.isLoggedIn = this.authService.isLoggedIn;
     return this.isLoggedIn;
 }

login.component.ts

import { Component, OnInit,Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import {HttpService} from '../../Services/Http/http.service'
import {CookieService} from 'ngx-cookie-service';
import { AuthService } from '../../auth/auth.service';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [AuthService]
})
export class LoginComponent implements OnInit {


  constructor(private authService:AuthService, private http:HttpService, private cookie:CookieService, public dialogRef: MatDialogRef<LoginComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { }

    loginModel:any = {username:'',password:''}
    loginResult:any = {}
    invalid:boolean = false;

  ngOnInit() {
    this.invalid = false;
  }

  login(){
    console.log(this.loginModel)
    this.http.validateUser(this.loginModel).subscribe(dataRes => {
      console.log(dataRes);
      this.loginResult = dataRes
      this.authService.login(this.loginModel);
      this.cookie.set('token',this.loginResult.token)
      this.invalid = false;
      this.dialogRef.close();
    },err => {
      this.invalid = true;
      this.loginResult = err
      console.log(err)
    });
  }

  closeDialog(){
    this.dialogRef.close();
  }

}

Answer 1

Существует несколько проблем, препятствующих правильной работе ngIf ...

A) isLoggedIn - это свойство, а не функция (вы определяете его с помощью метода получения). B) isLoggedIn является наблюдаемым, а не логическим свойством ..... следующее изменение должно скрыть кнопку ....

<li class="nav-item" *ngIf="IsLoggedIn | async">
                <a class="nav-link" (click)="openDialog()" >Login</a>
</li>