Node.js 节点/角度2：用户登录后更新导航栏并显示侧栏

这是我第一个使用Angular 2的项目/应用程序。我目前正陷入应用程序的登录问题。因此，在我的web应用程序中：

期望值：

我第一次加载了一个登录组件。在这种情况下，导航栏显示“登录”按钮

正确登录后，我可以转到仪表板组件。在dashboard组件中，我可以在左侧看到一个侧栏，我的导航栏被更新为显示“注销”按钮

当我单击“注销”时，它会优雅地将我注销

为了更清楚地了解情况，我上传了显示登录和仪表板的外观，以及登录后实际发生的情况

现实：

我使用Angular 2中的

localStorage

将当前用户存储在键

currentUser

中，并检测用户是否登录。只要它在

currentUser

键中没有值，登录组件就可以正常工作。否则，它将显示一个没有标题的空仪表板

登录后，侧栏和更新的导航栏与登录屏幕混淆，而仪表板不显示

我现在让你看看我的代码

如果您注意到，角度前端连接到Node.js后端。Node.js后端工作正常

我认为主要的问题在于我对可观察对象的使用（告诉每个订阅组件用户已登录）、路由上的身份验证守卫，以及身份验证服务本身

为了满足上述期望，我尝试使用可观测值并将值发送到订阅组件。然而，我上面提到的“现实”点发生了，我还不知道如何再次修复它

---

那么，你能告诉我问题在哪里，我能做些什么来解决它吗？非常感谢您的意见。

最后，我找到了问题所在

身份验证卫士刚刚从

this.authService.isLoggedInObservable（）

方法传递了

Observable

。它没有为路由提供正确的值，以了解用户是否实际登录

如果您在回购协议中看到，我使用

Observable

告诉其他组件/路由我是否已登录

我所做的一个变通方法是在保护内部实际存储一个私有变量。我这样做是为了保护内部的

canActivate（）

方法只返回该私有变量：

true

表示我已登录，

false

表示我已登录

如何让该私有变量知道我现在已登录，其值需要更改

在构造函数中，我确保guard使用该布尔值订阅了Observable，并相应地更新该变量

我刚从

AuthenticationGuard

更改了代码。没有更少，没有更多

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;
    }
}