Почему мои наблюдаемые не излучают должным образом с помощью асинхронного канала c и * ngIf в Angular? - PullRequest
Новая
       25

Почему мои наблюдаемые не излучают должным образом с помощью асинхронного канала c и * ngIf в Angular?

0 голосов
/ 10 апреля 2020

Я следую учебному пособию по Udemy об аутентификации. Он немного старше, поэтому я не на 100% уверен, что одна из вещей, которые он мне показывает, больше не верна - главным образом потому, что она не работает. : -)

Проблема: Наблюдаемые, которые должны отслеживаться, если пользователь вошел в систему, по-видимому, всегда не определены, поскольку все пункты меню «Регистрация / Вход / Выход из системы» всегда все не показ.

Есть сервер аутентификации, который выглядит следующим образом: 

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  private rootURL: string = 'https://localhost:3000/users';

  private subject: BehaviorSubject<User> = new BehaviorSubject<User>(undefined);
  user$: Observable<User> = this.subject.asObservable().pipe(filter(user => !!user));
  isLoggedIn$: Observable<boolean> = this.user$.pipe(map(user => !!user.id));
  isLoggedOut$: Observable<boolean> = this.user$.pipe(map(isLoggedIn => !!isLoggedIn));

  constructor(private httpClient: HttpClient) {httpClient.get<User>(`${this.rootURL}`)
              .subscribe(user => this.subject.next(user ? user : UNDEFINED_USER));}

  login(userName: string, password: string) {...}

  register(userName: string, password: string): Observable<User> {...}

  logout() {...}
}

, тогда у меня есть следующий компонент, который должен отображать пункты меню Регистрация / Вход / Выход из системы соответственно. 

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  constructor(private auth: AuthenticationService) {}

  isLoggedIn$: Observable<boolean>;
  isLoggedOut$: Observable<boolean>;

  ngOnInit() {
    this.isLoggedIn$ = this.auth.isLoggedIn$;
    this.isLoggedOut$ = this.auth.isLoggedOut$;
  }

  logout() {...}
}

и вот соответствующая часть шаблона: 

  <div class="navbar-nav">
    <a class="nav-item nav-link" *ngIf="isLoggedOut$ | async" routerLink="/register">Register</a>
    <a class="nav-item nav-link" *ngIf="isLoggedOut$ | async" routerLink="/login">Login</a>
    <a class="nav-item nav-link" style="cursor: pointer;" *ngIf="isLoggedIn$ | async" (click)="logout()">Logout</a>
  </div>

UNDEFINED_USER определяется следующим образом: 

export const UNDEFINED_USER: User = {
  id: '',
  email: ''
};

Таким образом, проблема заключается в том, что все три из *ngIf оператор выше всегда оценивается как false, а три элемента всегда скрыты.

Цепочка таких наблюдаемых полей кажется мне действительно странной - это все еще должно работать или есть лучший способ?

Как правильно сделать это? ?

EDIT : добавлено .id к вызову map для `IsLoggedIn $` `

EDIT : добавлено определение UNDEFINED_USER

...