我如何在登录中订阅更改

Question

我有一个导航栏菜单组件，该组件具有取决于用户是否已登录的可选链接。在当前设置中，导航栏在初始化时检查登录状态（通过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;
  }
}

我希望导航栏菜单组件在用户登录或注销时做出反应。 这意味着在导航服务订阅的LoginService或LoginComponent中发布事件。 您可以看到我试图在导航栏菜单中写一个订阅，但是没用！

我应该如何工作？

编辑 ：这是loginService：

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.checkLoginStatus是一个Observable ，一旦用户执行登录或注销，它将以true或false推送新的boolean值，则可以简单地使用它。

实际上，您已经在使用它。 因此，只要用户的登录状态发生变化，组件上的isLoggedIn属性就会更新。 因此，您应该可以在模板中直接使用它。

另外，既然是这种情况，则不需要ngOnInit的代码。 实际上，您可以将constructor代码移至ngOnInit并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);
  }

  ...
}

更新：

我认为您应该在LoginService创建一个private BehaviorSubject ，然后将其公开公开为asObservable 。 现在，一旦用户登录，只需在此私有BehaviorSubject上调用.next(true) ，然后在用户注销时，调用.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);
  }

  ...
}

Answer 2

由于我已添加了loggingStatus eventemitter对象，因此在LoginService下面可能会为您提供帮助。 因此，当用户基于该特定值登录或注销时，我们正在发射，而我们将在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;

        }
      }
    }

导航组件更改

下面的代码可以在ngOnInit方法中实现。

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