首页 > 解决方案 > Angular:成功验证后不呈现顶部栏

问题描述

成功登录后,生成令牌并呈现除顶部栏之外的每个组件。我不明白发生了什么。下面是我的代码:

认证服务

private authStatusListener = new Subject<boolean>();

loginUser(authData) {
    this.http.post<{ token: string }>(this.url + '/authenticate', authData).subscribe(response => {
      const token  = response.token;
      if(token) {
        this.isAuthenticated = true;
        this.authStatusListener.next(true);
        this.saveAuthData(token);
        this.router.navigate(['/admin/dashboard']);
      }
    });
}

getAuthStatusListener() {
    return this.authStatusListener.asObservable();
}

导航栏组件

userIsAuthenticated = false;
private authListenerSubs: Subscription;

ngOnInit() {
  this.authListenerSubs = this.adminAuth.getAuthStatusListener().subscribe(isAuthenticated => {
    this.userIsAuthenticated = isAuthenticated;
  });
}

ngOnDestroy() {
  this.authListenerSubs.unsubscribe();
}

导航栏 HTML

<mat-toolbar color="primary" *ngIf="userIsAuthenticated">
  <span><a [routerLink]="['/admin/dashboard']" class="tabs">Admin</a></span>
  <span class="space-right"></span>
  <ul>
    <li><button mat-button [routerLink]="['/admin/dashboard']" routerLinkActive="highlight" class="tabs">Dashboard</button></li>
    <li><button mat-button [routerLink]="['/admin/create_category']" routerLinkActive="highlight" class="tabs">Exam Category</button></li>
    <li><button mat-button [routerLink]="['/admin/create_question_category']" routerLinkActive="highlight" class="tabs">Question Category</button></li>
    <li><button mat-button [routerLink]="['/admin/create_section']" routerLinkActive="highlight" class="tabs">Section Marks</button></li>
    <li><button mat-button [routerLink]="['/admin/exam']" routerLinkActive="highlight" class="tabs">Exam</button></li>
    <li><button mat-button [routerLink]="['/admin/question']" routerLinkActive="highlight" class="tabs">Question</button></li>
    <li><button mat-icon-button class="tabs" (click)="onLogout()"><mat-icon>power_settings_new</mat-icon></button></li>
  </ul>
</mat-toolbar>
<main><router-outlet></router-outlet></main>

我理解的是,虽然在服务中userIsAuthenticated正在返回,但将其设置为. 请告诉我修改此代码的方法或任何其他方式。falsetrue

PS注销后此导航栏将不会出现

标签: angulartypescriptangular9angular-httpclient

解决方案


推荐阅读