Angular（5）-成功登錄后，登錄按鈕未更改為注銷

Question

我正在使用Auth0的API來處理用戶管理。 一切都按預期工作-在Login()它正確存儲在本地。 在Logout()它會正確刪除它們。

但是，實際的“ Login按鈕在成功后並不會自動變為“ Logout -這是我硬刷新頁面但不是直接刷新頁面時。 我相信這是我的約束問題嗎？

標頭組件

  authenticated: boolean; // Wasn't sure how else to filter in front-end

  constructor(private authService: AuthService) { }

  ngOnInit() {
    this.authenticated = this.authService.isAuthenticated()
  }



  login() {
    this.authService.login();
  }

  logout() {
    this.authService.logout();
  }

}

HTML標題

  <li class="nav-item">
    <a class="nav-link waves-light" *ngIf="!authenticated" mdbRippleRadius (click)="login()"><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Log In</span></a>
    <a class="nav-link waves-light" *ngIf="authenticated" mdbRippleRadius (click)="logout()"><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Log Out</span></a>
  </li>

據說使用auth.isAuthenticated()的文檔會從服務中調用該函數

  public isAuthenticated(): boolean {
    // Check whether the current time is past the
    // access token's expiry time
    const expiresAt = JSON.parse(localStorage.getItem('expires_at'));
    return new Date().getTime() < expiresAt;
  }

我在想也許應該將this.authenticated = this.authService.isAuthenticated()附加到標頭組件中每個login()/logout()函數的末尾，但是我感覺我的方向錯誤這個。

歡迎任何意見。

更新資料

修改logout()以調用this.authenticated = this.authService.isAuthenticated()確實解決了該問題，但是直到刷新頁面后，Login仍不會退出。

Answer 1

您可以編寫經過authenticated的屬性獲取器：

public get authenticated(): boolean {
    return this.authService.isAuthenticated();
}

Answer 2

據我所知，您只是在init上更新變量。 這就是為什么您僅在刷新時看到更改的原因。 如果你這樣做

login() {
this.authService.login();
this.authenticated = this.authService.isAuthenticated()
  }

在登錄方法內部，它應該起作用。