角导航栏数据未刷新

服务功能

  public retrieveUserInfo(): Observable<User>{
    const headers = new HttpHeaders().set('token', localStorage.getItem("token"));
    return this.httpClient.get<User>("http://localhost:8080/api/retrieveUserInfo", {headers, responseType: 'json' as 'json' });
  }

这是我的app.component.html

<div class="container">
  <app-navigation></app-navigation>
  <router-outlet></router-outlet>
</div>

导航组件ts

export class NavigationComponent implements OnInit {
  isShown:boolean = false;
  user: User;
  constructor(public apiService: ApiService) { }

  ngOnInit(): void {
    if(this.apiService.isUserLoggedIn()){
      this.retrieveUserInfoo();
    }
  }

  retrieveUserInfoo(){
    this.apiService.retrieveUserInfo().subscribe(
      res=> {
        this.user=res;
      },
    )
  }

}

这是我的导航组件html

<nav class="navbar navbar-expand-lg navbar-dark pozadie mb-5">
  <a class="navbar-brand" routerLink="/">Adam Mikeška</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" (click)="isShown = !isShown" [attr.aria-expanded]="isShown" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div [ngClass]="{ 'show': isShown }" class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a [routerLink]="['/']" [routerLinkActive]="['active']"[routerLinkActiveOptions]="{ exact: true }" class="nav-link">Home<i class="fa fa-home ml-1"></i> </a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li *ngIf="apiService.isUserLoggedIn()===false" class="nav-item">
        <a [routerLink]="['/login']" [routerLinkActive]="['active']" class="nav-link">Login <i class="fa fa-sign-in ml-1"></i></a>
      </li>
      <li *ngIf="apiService.isUserLoggedIn()" class="nav-item">
        <a [routerLink]="['/dashboard']" [routerLinkActive]="['active']" class="nav-link">Dashboard<i class="fa fa-line-chart ml-1"></i></a>
      </li>
      <li *ngIf="apiService.isUserLoggedIn()" class="nav-item">
        <a [routerLinkActive]="['active']" class="nav-link">{{user.email}}<i class="fa fa-user ml-1"></i></a>
      </li>
      <li *ngIf="apiService.isUserLoggedIn()" class="nav-item">
        <a  [routerLink]="['/login']" (click)="apiService.logout()"  class="nav-link">Logout<i class="fa fa-sign-out ml-1"></i></a>
      </li>
      <li *ngIf="apiService.isUserLoggedIn()===false" class="nav-item">
        <a [routerLink]="['/register']" [routerLinkActive]="['active']" class="nav-link">Register<i class="fa fa-sign-in ml-1"></i></a>
      </li>
    </ul>
  </div>
</nav>

用户是否已登录

  public isUserLoggedIn() {
    let user = localStorage.getItem('token');
    return !(user === null);
  }

问题是成功登录后导航没有刷新,因此登录后的user.email值为空,需要刷新页面以显示数据。 有什么办法吗? 谢谢

评论
  • 如今Ac
    如今Ac 回复

    I think apiService.isUserLoggedIn() should be changed from a function to BehaviorSubject and make sure any auth state changes propagates through it. function is evaluated once in this example.

    // in api service constructor
    this.apiService.isUserLoggedIn = new BehaviorSubject(false);
    let user = localStorage.getItem('token');
    this.apiService.isUserLoggedIn.next(user !== null);
    
    // after sign in callback
    this.apiService.isUserLoggedIn.next(true);
    
    // NavigationComponent 
    ngOnInit(): void {
        this.apiService.isUserLoggedIn.subscribe(value => {
          if(value) {
            this.retrieveUserInfoo();
          }
        })
      }