我有一个Angular 2应用程序，我已将身份验证集成到使用服务。用户可以登录，当 localStorage 中有令牌时，用户被视为已通过身份验证。我在导航栏中有一个用于登录的按钮，它会显示一个模态登录表单。使用表单对用户进行身份验证后，它将关闭，但按钮不会更改为“注销”按钮。我已将其设置为使用名为app.component的{{1}}上的属性，该属性从身份验证服务IsAuthenticated方法获取其值，该方法返回类型为boolean的Observable，指示是否或者用户是否已经过身份验证。但是，即使状态已更改，此属性也不会在用户通过身份验证时发生更改。我已经尝试了很多方法来回应状态变化，但没有任何效果。任何帮助表示赞赏！
isAuthenticated()（只是isAuthenticated函数）：
authentication.service.ts public isAuthenticated(): Observable<boolean> {
let token = localStorage.getItem('currentUser');
if (token) {
let tokenObject = JSON.parse(token);
let expiresOn = moment(tokenObject.expires);
// Confirm there is a token, and it's expiration is later than now
let isLoggedIn = tokenObject.token !== '' && expiresOn > moment();
return Observable.of(isLoggedIn);
}
return Observable.of(false);
}
：
app.component.ts export class AppComponent implements OnInit {
public IsAuthenticated: boolean;
loginModal: LoginComponent;
constructor (
private modalService: NgbModal,
private authService: AuthenticationService
) { }
openLogin(): void {
this.modalService.open(LoginComponent, { size: 'sm' });
}
logout(): void {
if (confirm('Are you sure you want to log out?')) {
this.authService.logout();
this.IsAuthenticated = false;
}
}
ngOnInit() {
this.authService.isAuthenticated()
.subscribe(loggedIn => this.IsAuthenticated = loggedIn);
}
}
：
app.component.html当用户点击＆＃34; 登录＆＃34;按钮，弹出模式，我可以登录，但是当它完成后，仍然会显示登录按钮，而不是Logout，我还有其他UI元素使用相同的 <ul class="nav navbar-nav pull-right">
<li class="nav-item">
<button class="btn btn-primary" (click)="openLogin()" *ngIf="!IsAuthenticated">Login</button>
<button class="btn btn-primary" (click)="logout()" *ngIf="IsAuthenticated">Logout</button>
</li>
</ul>
。改变...我错过了什么？
答案 0 :(得分：1)
<强>被修改
将*ngIf="isAuthenticated"更改为*ngIf="authService.isAuthenticated()"，IsAuthenticated是一个函数，因此您必须通过添加括号来调用它，它是您服务的一个功能，因此您必须调用该服务的实例。