Как подписаться на изменения в логине

Question

У меня есть компонент меню navbar, который имеет дополнительные ссылки, которые зависят от того, вошел ли пользователь в систему или нет. В моих текущих настройках navbar проверяет состояние входа в систему (через LoginService) при инициализации.Вот NavMenuComponent.ts :

export class NavMenuComponent implements OnInit {
  isExpanded = false;
  isNavbarCollapsed = true;

  isLoggedIn: boolean;

  subscription: Subscription;

  constructor(private jwtHelper: JwtHelper, private loginService: LoginService) {

    this.subscription = loginService.checkLoginStatus.subscribe(
      isLoggedIn => {
        this.isLoggedIn = isLoggedIn
      });
  }

  ngOnInit() {
    //this.checkLoginStatus();
    this.isLoggedIn = this.loginService.checkLoginStatus();
  }

  collapse() {
    this.isExpanded = false;
  }

  toggle() {
    this.isExpanded = !this.isExpanded;
  }
}

Я хочу, чтобы компонент меню navbar реагировал, если пользователь входит в систему или выходит из нее. Это означает публикацию события вили my в LoginService или LoginComponent, на который подписана навигационная панель.Вы можете видеть, что я пытался написать подписку в меню навигационной панели, которая не работает!

Как мне заставить ее работать?

Редактировать :Вот сервис входа в систему:

export class LoginService {
  //isLoggedIn: boolean;

  constructor(private jwtHelper: JwtHelper) { }

  //checkLoginStatus(): Observable<boolean> {
   checkLoginStatus(): boolean {
    var token = localStorage.getItem("jwt");

    if (token && !this.jwtHelper.isTokenExpired(token)){
      //console.log(this.jwtHelper.decodeToken(token));
      alert("user is logged in");
      //this.isLoggedIn = true;

      return true;
    }
    else {
      //this.isLoggedIn = false;
      alert("user is NOT logged in");
      return false;

    }
  }
}

Answer 1

Ниже вам может помочь LoginService, так как я добавил объект eventemitter loggedStatus.Поэтому, когда пользователь входит или выходит из системы на основе этого конкретного значения, которое мы излучаем, и того же значения мы получим в компоненте Nav.

export class LoginService {
      //isLoggedIn: boolean;
      loggedStatus = new EventEmitter<boolean>();

      constructor(private jwtHelper: JwtHelper) { }

      //checkLoginStatus(): Observable<boolean> {
       checkLoginStatus(): boolean {
        var token = localStorage.getItem("jwt");

        if (token && !this.jwtHelper.isTokenExpired(token)){
          //console.log(this.jwtHelper.decodeToken(token));
          alert("user is logged in");
          //this.isLoggedIn = true;
          this.loggedStatus.emit(true);
          return true;
        }
        else {
          //this.isLoggedIn = false;
          alert("user is NOT logged in");
          this.loggedStatus.emit(false);
          return false;

        }
      }
    }

Изменение компонента Nav

Ниже кода, который вы можете реализовать вметод ngOnInit.

this.loginService.loggedStatus.subscribe(
      isLoggedIn => {
        this.isLoggedIn = isLoggedIn
      });

Answer 2

Предполагая, что loginService.checkLoginStatus - это Observable, который будет выдвигать новые значения boolean в true или false, как только пользователь выполнит вход или выход из системы, вы можете просто использовать это.

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

Кроме того, поскольку это так, вам не нужен код, который вы используете в ngOnInit.На самом деле, вы можете переместить свой код constructor в ngOnInit и немного изменить его код.Примерно так:

export class NavMenuComponent implements OnInit {
  isExpanded = false;
  isNavbarCollapsed = true;

  isLoggedIn: boolean;

  subscription: Subscription;

  constructor(
    private jwtHelper: JwtHelper, 
    private loginService: LoginService
  ) {}

  ngOnInit() {
    this.subscription = loginService.checkLoginStatus
      .subscribe(isLoggedIn => this.isLoggedIn = isLoggedIn);
  }

  ...
}

ОБНОВЛЕНИЕ:

Я думаю, вам следует создать private BehaviorSubject в вашем LoginService, который вы затем собираетесь выставить asObservable публично,Теперь, когда пользователь входит в систему, просто наберите .next(true) для этого личного BehaviorSubject, а когда пользователь выйдет из системы, позвоните .next(true).

import { BehaviorSubject, Observable } from 'rxjs';

export class LoginService {

  private isLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  isLoggedIn$: Observable<boolean> = this.isLoggedIn.asObservable();

  constructor(private jwtHelper: JwtHelper) {}

  ...

  // When Login
  this.isLoggedIn.next(true) 

  ...

  // When Logout
  this.isLoggedIn.next(false)

  /* checkLoginStatus(): boolean {
    var token = localStorage.getItem("jwt");

    (token && !this.jwtHelper.isTokenExpired(token)) ? this.isLoggedIn.next(true): this.isLoggedIn.next(false);
  } */
}

Затем вы можете subscribe на public Observable обычным способом в вашем Компоненте.

Примерно так:

export class NavMenuComponent implements OnInit {
  isExpanded = false;
  isNavbarCollapsed = true;

  isLoggedIn: boolean;

  subscription: Subscription;

  constructor(
    private jwtHelper: JwtHelper, 
    private loginService: LoginService
  ) {}

  ngOnInit() {
    this.subscription = this.loginService.isLoggedIn$
      .subscribe(isLoggedIn => this.isLoggedIn = isLoggedIn);
  }

  ...
}