[英]Angular(5) - Login button not changing to Logout on successful login
I'm using Auth0's API to handle user management. 我正在使用Auth0的API来处理用户管理。 Everything is working as intended - On Login()
it properly stores local. 一切都按预期工作-在Login()
它正确存储在本地。 On Logout()
it properly removes them. 在Logout()
它会正确删除它们。
However, the actual Login
button is not becoming Logout
automatically on success - It is when I hard-refresh the page, but not directly. 但是,实际的“ Login
按钮在成功后并不会自动变为“ Logout
-这是我硬刷新页面但不是直接刷新页面时。 I believe this is an issue with my binding? 我相信这是我的约束问题吗?
Header component 标头组件
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 For Header 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>
The docs said to use auth.isAuthenticated()
which would call the function from the service 据说使用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;
}
I was thinking perhaps I should append this.authenticated = this.authService.isAuthenticated()
to the end of each login()/logout()
function in the header component, but I'm feeling like I'm going the wrong direction with this. 我在想也许应该将this.authenticated = this.authService.isAuthenticated()
附加到标头组件中每个login()/logout()
函数的末尾,但是我感觉我的方向错误这个。
Welcome any input. 欢迎任何意见。
Update 更新资料
Modifying logout()
to call this.authenticated = this.authService.isAuthenticated()
did resolve the issue for it, but Login is still not becoming Log Out until I refresh the page. 修改logout()
以调用this.authenticated = this.authService.isAuthenticated()
确实解决了该问题,但是直到刷新页面后,Login仍不会退出。
You can write authenticated
as a property getter: 您可以编写经过authenticated
的属性获取器:
public get authenticated(): boolean {
return this.authService.isAuthenticated();
}
From what I can see you're only updating your variable on init. 据我所知,您只是在init上更新变量。 That's why you only see the changes when you refresh. 这就是为什么您仅在刷新时看到更改的原因。 If you do 如果你这样做
login() {
this.authService.login();
this.authenticated = this.authService.isAuthenticated()
}
Inside the login method it should work. 在登录方法内部,它应该起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.