仅在登录后启用注销按钮 Angular 7

Question

我参考了以下 link 仅在登录后启用注销按钮 https://stackblitz.com/edit/angular-login-hide-navbar-ngif

我只想在用户登录时在导航栏中显示 "logout"，我正在通过从 "Authenication service" 调用 "this.authservice.isUserLoggedIn" 并分配它来验证用户是否登录到变量并在 "logout" link 附近写入 ngif 条件。我已经使用 BehaviourSubject 来获取当前状态。但我不知道为什么代码不工作，它总是返回 false，因此 "logout" link 即使在用户登录后也没有启用

我有header.component.ts

export class CommonheaderComponent implements OnInit {

  constructor(private authservice : AuthenticationService) { }
  isLoggedIn$ : Observable<boolean>;
  ngOnInit() {
    this.isLoggedIn$ = this.authservice.isUserLoggedIn;
  }
  }

我有如下header.component.html

<ul class="nav navbar-nav">
      <li><a [routerLink]='["/search"]'>Search <span class="slider"></span></a></li>
      <li *ngIf="isLoggedIn"><a (click)="logout()">Logout</a></li>
  </ul>

下面是login.component.ts

export class LoginComponent implements OnInit {
  isLoggedIn : Observable<boolean>;

 ngOnInit() {
   this.isLoggedIn = this.authservice.isUserLoggedIn;
   this.loginForm = this.formbuilder.group({
    username : ['', Validators.required],
    password : ['', Validators.required]
  })
 }

}

  onSubmit(){
    this.authservice.login(this.loginForm.value).subscribe(data => {
  })    
 }
}

我有如下认证服务

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { BehaviorSubject, Observable } from 'rxjs';
    import { map } from 'rxjs/operators';
    import { User } from '../_models/user';
    import { Router } from '@angular/router';

    const httpOptions =  {
      headers : new HttpHeaders({'Content-type' : 'application/json'})
    }

    @Injectable({
      providedIn: 'root'
    })
    export class AuthenticationService {
      private currentUserSubject : BehaviorSubject<User>;
      private currentUser : Observable<User>;
      private loggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

      constructor(private http: HttpClient, private router: Router) {
        this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
        this.currentUser = this.currentUserSubject.asObservable();
      }

      public get currentUserValue(): User{
        return this.currentUserSubject.value;
      }

      public login(user: User):Observable<any>{
        var baseUrl = "http://localhost:3000/";
        return this.http.post<any>(baseUrl+'auth/login', user, httpOptions).pipe(map(user => {
          if(user && user.accesstoken){
            localStorage.setItem('currentUser', JSON.stringify(user));
            this.currentUserSubject.next(user);
            this.loggedIn.next(true);
          }else{
            return false;
          }
          return user;
        }))
      }

      get isUserLoggedIn(){
          return this.loggedIn.asObservable();
      } 
    }

我哪里做错了。或者对此的解决方案/替代方案是什么。请帮忙！！

长期以来我一直坚持这个

Answer 1

你能不能把你的模板换成这样试试：

<ul class="nav navbar-nav">
      <li><a [routerLink]='["/search"]'>Search <span class="slider"></span></a></li>
      <li *ngIf="isLoggedIn$ | async"><a (click)="logout()">Logout</a></li>
  </ul>

注意 async 管道解包可观察值。

您共享的 stackblitz 示例中的注意事项 - 可观察值使用 async 管道展开 -

<mat-toolbar color="primary" *ngIf="isLoggedIn$ | async as isLoggedIn">

Answer 2

关于您最后的评论，发生这种情况是因为服务正在重新初始化并且您的可观察对象正在重置。将此添加到您的构造函数

if(localStorage.getItem('currentUser') != null)
    this.loggedIn.next(true);

这对我有用。

仅在登录后启用注销按钮 Angular 7

enable Logout button only after Login in Angular 7

angular

typescript

angular7

behaviorsubject

angular-changedetection