Angular(5) - 登录成功登录后,登录按钮不会更改为Logout

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仍然没有变为Lo​​g Out.

Answer 1

你可以写authenticated一个属性getter:

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