Angular 角度JWT令牌刷新

我有一个带有.Net内核后端的angular应用程序，使用JWT身份验证令牌。一切都很好，除了一件事：当登录发生时，一个按钮应该只在本地存储中立即出现JWT的情况下出现……但它没有！只有当我刷新页面时，按钮才会出现在导航栏中！我能解决这个问题吗？提前谢谢

这是我使用变量isLoggedIn的组件，以便显示按钮或不显示按钮： top-bar.component.html

auth.service.ts

---

登录成功后，您可以使用对象通知组件更新模板

auth.service.ts

---

请发布容易出错的代码。我发布了服务类，请告诉我您是否需要html或任何其他存储代码，因为图像很难复制。一个更好的版本将是一个最小的工作示例，例如使用Stackblitz。是的，没有模板是不清楚的。您的isAuthenticated检查是在postLogin检查之前进行的吗？发布你的模板代码！调用isAuthenticated，以便检查令牌是否在本地storagebrowser中，如果是，则证明用户的后登录成功，因为服务器返回了jwt，因此，导航栏上的按钮将出现！非常感谢您提供此解决方案！在对行为主体进行了一些研究之后，这是非常有意义的！干杯哈哈，谢谢，我也学会了。。。

<mat-toolbar class="mat-elevation-z10 toolbar-style">
    <a [routerLink]="['/']">
        <img class="top-bar-logo" src="assets/Images/DocShareAppLogo.png" alt="DocShareApp-Automobile">
    </a>
    <span class="spacer"></span>
    <div class="spaceInButtons" *ngIf="isLoggedIn">
        <mat-menu #appAccountMenu="matMenu">
            <button routerLink="personalInfo" mat-menu-item>Personal Info</button>
        </mat-menu>

        <a mat-raised-button class="account-button-color" [matMenuTriggerFor]="appAccountMenu">
            My Account
        </a>
    </div>
    <mat-menu #appFabAccount="matMenu">
        <button routerLink="registerLogin" mat-menu-item>Register/Login</button>
    </mat-menu>
    <a mat-fab class="account-button-color" [matMenuTriggerFor]="appFabAccount">
        <mat-icon>account_circle</mat-icon>
    </a>
</mat-toolbar>

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../shared/auth.service';


@Component({
  selector: 'app-top-bar',
  templateUrl: './top-bar.component.html',
  styleUrls: ['./top-bar.component.css']
})
export class TopBarComponent implements OnInit {

  isLoggedIn = false;

  constructor(private authService: AuthService) { }

  ngOnInit(): void {
    this.isLoggedIn = this.authService.isAuthenticated();
  }

}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormGroupDirective } from '@angular/forms';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  readonly rootURL = 'https://localhost:5001/';

  constructor(private httpClient: HttpClient, private toastr: ToastrService, private router: Router) { }

  postLogin(formModel: FormGroup, formDirective: FormGroupDirective){
    return this.httpClient.post(this.rootURL + 'Users/login', formModel).subscribe(
      (response: any) => {
        if (response.succeeded)
        formModel.reset();
        formDirective.resetForm();
        localStorage.setItem('token', response.token);
        //localStorage.removeItem('token');
        this.router.navigateByUrl('/');
        this.toastr.success('You have been logged in', response.message, { positionClass: 'toast-top-right' } )
      },
      errorResponse => {
       this.toastr.error(errorResponse.error.message, 'Login unsuccessful', { positionClass: 'toast-top-right' });
        }
    );  
  }

  isAuthenticated(): boolean{
    if (localStorage.getItem('token')){
      return true;
    }
    else{
      return false;
    }
  }
}

loginSubject = new BehaviorSubject<boolean>(false);

setLogin(status) {
  this.loginSubject.next(status);
}

ngOnInit(): void {
  this.authService.loginSubject.subscribe(
    status => this.isLoggedIn = status
  )
}