节点/angular2：用户login后更新导航栏和显示侧栏
这是我第一个使用Angular 2的项目/应用程序。我目前被困在应用程序的login问题中。 所以，在我的networking应用程序：
期望：
-
我第一次加载一个login组件。 在这种情况下，导航栏显示“login”button。
-
正确login后，我可以转到仪表板组件。 在仪表板组件中，我可以在左侧看到侧边栏，我的导航栏更新为显示“注销”button。
-
当我点击“退出”时，它应该优雅地签约我。
为了更清晰的图片，我已经上传了一张专辑，显示了login和仪表盘的外观以及login后的实际情况。
现实：
- 我使用Angular 2的
localStorage将当前用户存储在关键的currentUser并检测用户是否login。只要在当前用户键中没有值，login组件就可以正常工作。 否则，它会显示一个没有标题的空白仪表板。 - login后，侧边栏和更新的导航栏与login屏幕混杂在一起，而仪表板不显示。
我已经做了一个临时的Git仓库 ，现在向你展示我的代码。
如果你注意到，Angular前端连接到一个Node.js后端。 Node.js后端工作得很好。
我认为主要的问题在于我使用Observable（告诉用户login的每个订阅组件），路由上的authentication保护以及authentication服务本身。
为了满足上面的期望，我试图使用Observables并将值发送到订阅组件。 不过，上面提到的“现实”一点也发生了，我还不知道还有什么办法可以解决。
那么，你能帮我看看问题出在哪里，我能做些什么来解决问题？ 我将不胜感激您的意见，谢谢。
最后，我发现了这个问题。
身份validation守卫只是从this.authService.isLoggedInObservable()方法提供Observable 。 它不会为路由提供适当的值来知道用户是否实际login。
如果您在回购中看到，我使用Observable<boolean>来告诉其他组件/路由是否已经login。
我做的一个解决方法是实际存储一个私人variables内的警卫。 我这样做是为了让canActivate()中的canActivate()方法只返回这个私有variables： true表示我已经login，否则返回false 。
如何让这个私有variables知道我现在已经login，它的值需要改变？
在构造函数中，我确信警卫正在使用该布尔值来订阅Observable，并相应地更新该variables。
我只是改变了AuthenticationGuard的代码。 没有什么比这更less的了。
import { Injectable } from "@angular/core"; import { Router, CanActivate } from "@angular/router"; import { Observable } from "rxjs"; import { AuthenticationService } from "./authentication.service"; @Injectable() export class AuthenticationGuard implements CanActivate { private isLoggedIn: boolean; // to store the "logged in" state constructor( private router: Router, private authService: AuthenticationService) { this.authService.isLoggedInObservable().subscribe((val) => { this.isLoggedIn = val; // update as subscribed // redirect to login page if not logged in yet if (!val) this.router.navigate(["/login"]); }); } canActivate() { // only returns that private variable return this.isLoggedIn; } }