ノード/角度2：ユーザーログイン後にナビゲーションバーを更新し、サイドバーを表示

Question

これは私の最初のプロジェクト/アプリケーションで、角度2を使用しています。現在、アプリケーションのログインに問題があります。だから、私のWebアプリで：

期待：

1. 私が初めてのログインコンポーネントをロードします。この場合、ナビゲーションバーには「ログイン」ボタンが表示されます。

2. ログイン後、ダッシュボードコンポーネントに移動できます。ダッシュボードコンポーネントでは、左側にサイドバーが表示され、ナビゲーションバーに「サインアウト」ボタンが表示されます。

3. 「ログアウト」をクリックすると、正常に署名されます。鮮明な画像のために

、私はログインしてダッシュボードがどのように見えるべきかを示すan albumをアップロードして、ログイン後の実際の出来事ました。

現実：

1. IキーcurrentUserに現在のユーザを格納し、ユーザがログインしているか否かを検出する角度2からlocalStorageを使用する限り、それはcurrentUserキーの値をdeoesn'tとして、。ログインコンポーネントは正常に動作します。それ以外の場合は、タイトルなしの空のダッシュボードが表示されます。
2. ログイン後、ダッシュボードが表示されていない間に、サイドバーと更新されたナビゲーションバーがログイン画面で混乱します。

a temporary Git repoに私のコードを表示しました。

お気づきの場合、AngularフロントエンドはNode.jsバックエンドに接続されています。 Node.jsバックエンドはうまく動作します。

主な問題点はObservables（ユーザーがログインしているすべてのサブスクリプションコンポーネントに伝えるため）、ルート上の認証ガード、おそらく認証サービスそのものです。

上記の期待に応えるため、私はObservablesを使用しようとしましたが、サブスクリプションコンポーネントに値を送信しました。しかし、私が先ほど触れた「現実」の点がありましたが、私はそれをもう一度修正する方法を知らなかったのです。

私は問題がどこにあるのか、私はそれを修正するために何ができるのか教えていただけますか？あなたのご意見に感謝します。ありがとうございます。

Answer 1

最後に、問題が見つかりました。

Observableをthis.authService.isLoggedInObservable()メソッドから配信していただけです。ユーザーが実際にログインしているかどうかを知るためのルートの適切な値を提供しません。

レポに表示されている場合は、Observable<boolean>を使用して、ログインしたかどうかを他のコンポーネント/ルートに伝えます。

私がした回避策は、ガード内にプライベート変数を実際に格納することでした。true私はfalseそうでない場合は、ログインしてる意味：ガード内部canActivate()方法が唯一のプライベート変数があることを返すように私はこれをしませんでした。

私は今私がログインしていて、その値を変更する必要があることをそのプライベート変数に知らせる方法はありますか？

コンストラクタ内で、ガードがそのブール値で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; 
    } 
}