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()
  }

在登录方法内部，它应该起作用。