Angular2: как при авторизации обновить header.component?

Question

[Vadimqa]

Как подписаться на обновление хеадера при авторизации? В инете миллион вопросов по этому поводу, но слишком частные случаи и ответы для моего понимания. Я слабоват.
Есть user.service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class UserService {
  
    constructor(private http: HttpClient) { }
     
    getUser() {
        return this.http.get('/server/api/userService');
    }

    public isAuthenticated(): Observable<boolean> {   
      return this.getUser().pipe(
          map(data => !!data['login'])
      );
    }

}

И header.component

import { Component, OnInit } from '@angular/core';
import { UserService } from '../../shared/user.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
  providers: [UserService]
})

export class HeaderComponent implements OnInit {

      user: any;
      auth: boolean = false;

      isAuthenticated: boolean;
      
      constructor(private userService: UserService) { }        

      ngOnInit() {

        this.userService.getUser().subscribe(data => {
          this.user = data;
          if(this.user.login !== false) {this.auth = true;}
        });
      
      
        this.userService.isAuthenticated().subscribe( value => {
          this.isAuthenticated = value;
        });
    
    }

}

Дело в том, что шаблон хеадера никак не реагирует, пока не перезагрузить приложение целиком, нужна какая-то подписка на изменение данных, но я в этом ничего не понимаю

Answer 1

[Антон Швец]

@Injectable()
export class UserService {
    isAuthenticated$ = new ReplaySubject(1);
  
    constructor(private http: HttpClient) { }
     
    getUser() {
        return this.http.get('/server/api/userService').pipe(
          tap(data => this.isAuthenticated$.next(!!data['login'])),
        );
    }
}

export class HeaderComponent implements OnInit {
      user$: Observable<User>;
      isAuthenticated$: Observable<boolean>;

     constructor(private userService: UserService) { }        

      ngOnInit() {
        this.user$ = this.userService.getUser();
        this.isAuthenticated$ = this.userService.isAuthenticated$;
     }
}

При использовании AsyncPipe достаточно этого, хотя даже isAuthenticated - лишний.

Comments

[Vadimqa]

Спасибо за код, дело сдвинулось с мертвой точки. Записываю в компоненте хеадера console.log(this.isAuthenticated$). Теперь я вижу в консоли массив ReplaySubject с массивом _events и правильные значения: truе или false в зависимости от авторизации. Но опять же, эти значения меняются, только если перезагрузить страницу. Может это правильное поведение. Тогда мне надо проверить это, добавив условие *ngif в шаблон. Но что-то я вытащить не могу значение. Пробую нечто вроде этого, но не выходит console.log(this.isAuthenticated$._events[0]).

[Антон Швец]

Vadimqa, вам надо научиться работать с rx.
console.log(this.isAuthenticated$) - это бессмысленно. Выводить поток и потом выковыривать из него хранимое значение не надо.
Смотрите тогда уж так

this.isAuthenticated$.subscribe(v => console.log(v))

Или другой способ, следить за изменением потоков можно вставив в поток логирование. например

getUser() {
        return this.http.get('/server/api/userService').pipe(
          tap(data => this.isAuthenticated$.next(!!data['login'])),
          tap(data => {
              console.log('user', data);
              console.log('isAuthenticated', !!data['login']);
          }),
        );
    }

В повседневной работе я использую для хранения подобных данных стейт менеджер Akita, там можно для дебага использовать redux devtools.

[Vadimqa]

Я с ангуляром как мартышка и очки
Пробую все подряд в компоненте хеадер:

ngOnInit() {
        this.user$ = this.userService.getUser();
        this.isAuthenticated$ = this.userService.isAuthenticated$;
        //console.log(this.isAuthenticated$);
        //this.isAuthenticated$.subscribe(v => console.log(v))
        this.isAuthenticated$.subscribe((data: any) => {
            this.user$ = data;
            console.log(this.user$);
          }
        )

        this.userService.getUser().subscribe((data: any) => {
          this.user$ = data;
            console.log(this.user$);
        });
     }

В консоли вижу:

true
{login: true}

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

[Антон Швец]

Vadimqa, вам не нужно подписываться и в подписке присваивать значение переменнной. В моем ответе разве есть где-нибудь subscribe?
Выводите observable прямо в шаблоне с помощью {{isAuthenticated$ | async }}
Подписка будет сделана в шаблоне.

знак $ в имени поля обычно говорит о том, что это observable. Просто для наглядности, это необязательно.

[Vadimqa]

Антон, спасибо за помощь, понимаю, что утомил, но может еще кто-нибудь ответит
Последняя версия сейчас такая:

user.service

export class User {
    login: boolean;
}

@Injectable()
export class UserService {

    isAuthenticated$ = new ReplaySubject(1);
  
    constructor(private http: HttpClient) { }
     
    getUser() {
        return this.http.get<User>('/server/api/userService').pipe(
          tap(data => this.isAuthenticated$.next(!!data['login'])),
        );
    }

сервер возвращает {"login": true} или {"login": false}

header.component.ts

export class HeaderComponent implements OnInit {

      user$: Observable<User>;
      //user$: Observable<any>;
      //isAuthenticated$: Observable<boolean>; // Чтобы отключить ошибку
      isAuthenticated$: Observable<any>;
      
      constructor(private userService: UserService) { }

        ngOnInit() {
          this.user$ = this.userService.getUser();
          this.isAuthenticated$ = this.userService.isAuthenticated$;
       }
}

header.component.html
{{this.isAuthenticated$ | async }} так ничего не отображается
{{this.isAuthenticated$ | async | json }} так показывает NULL
{{this.isAuthenticated$ | json }} так { "_isScalar": false, "observers": [], "closed": false, "isStopped": false, "hasError": false, "thrownError": null, "_events": [], " с пустым _events

А вообще я думал использовать как-то так: *ngIf="this.isAuthenticated$"
Уже почти отчаялся и на грани использования document.location.href
В инете находил простой пример взаимодействия между компонентами, но там один из них должен быть дочерним

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

[Vadimqa]

В общем перепробовал десяток примеров из интернета, заработал только этот: https://habr.com/ru/post/471100/ Может кому из новичков тоже пригодится

[Антон Швец]

Vadimqa, о.о до сих пор?
Странно что вызвало столько затруднений. Пример по вашей ссылке довольно тривиален и не слишком хорош, я бы не стал такое выносить в статью. Что-то похожее я даже показывал на тостере.
Возьмите akita, она удобная, не требует бойлерплейта и в дебаге можно использовать redux tools.

[Vadimqa]

На самом деле я потратил кучу времени еще до того как тут вопрос написал, а потом перерыв был затяжной. Акиту взял на заметку, но пока для меня это все сложновато. У меня сложности с пониманием клиентских технологий, максимум что могу, на jquery наколхозить. Вот решил, что надо исправлять ситуацию и делаю тренировочную админку не для массового использования на угловом. Из принципа хотел дожать подписку между одноуровневыми компонентами, хотя нужна была мелочь и можно было бы сделать проще. На этот раз достаточно, а в будущем, если понадобятся подобные подписки часто, то начну с знакомства с акитой. Ох уж интересная штука этот ангуляр, но очень сложный для понимания!

[Антон Швец]

Vadimqa, быть Ангуляр разработчиком очень и очень просто.
Вот смотрите, рядовая статья, все понятно