角2：更新後のコンポーネント情報の損失

Question

メニュー付きのヘッダーを管理するapp.componentがあります。 このコンポーネントのhtmlは、変数 "isAdmin"と "isAuthenticated"が真であるかどうかを条件付きでチェックするので、すべてのメニューリンクを有効/無効にすることができます。

私はngOnInitインターフェイスの実装において観察セットを介してユーザの状況をapp.componentに戻りauth.componentとauth.serviceからログイン：私はページ内作業する場合

ngOnInit() { 
    this.isAuthSubscription = this.authService.isAuth$ 
     .subscribe(
     val => { 
      let role; 
      role = val 
      this.isAuthenticated = false; 
      if (role) { 
       this.isAuthenticated = true; 
       this.isAdmin = false; 
       if (role == 'admin'){ 
        this.isAdmin = true; 
       } 
      } 
      this.user = this.helpService.getUser(); 
     }); 
} 

すべてがうまくいきますが、ブラウザのURLバーに「isAdmin」と「isAuthenticated」に関する情報がありません。

リフレッシュ火災アップ私は404ステータス応答を回避するために挿入し、サーバHTTP GETメソッド：

jAppRouter.get('/', function (req, res, next) { 
    res.render('index'); 
}); 

をそれはおそらく情報が観測可能に遭遇することを依存しますが、どのようにこの問題を解決することができますか？ 私は基本的にこれは、特定のではない任意のSPAの予想される動作となり おかげ マックス

Answer 1

...異なるコンポーネントからの私のメニュー（app.component）をリフレッシュすることができるようにしたい、多分これは正しい方法ではありませんAngularへブラウザのリフレッシュが発生すると、アプリケーションは状態を失い、前に実行されたアクションはまったく認識しません。

Answer 2

私はそれを動作させるためにやったステップ（私はそれの周りに多くの時間を過ごした）を共有した人を助けることができる場合。

ユーザーが管理者であるかどうかを確認するためのサーバーコールを行うために、認証トークン（既にlocalstorageに配置されています）を使用しました。

この情報を使用して、いつでもどこでも（app.componentに存在する）メニューをいつでも更新できます。

問題はすべての操作を正しく同期させることです。

私は基本的に2つの場所でこの操作を行います：ユーザログイン時とブラウザが更新されたとき。

私はアプリを有効な状態にして一貫性を持たせたいので、一貫性があり、さわやかな管理が必要です。 App.Componentで

：ngOnInitで

私は、ユーザーが管理者であるか、私はリフレッシュするときに、私はすぐにこの情報を持っていない場合は、私を返すカスタムサービス関数を呼び出します。第二に、私は、ユーザーがログインしている私を知らせる加入を挿入します。

ngOnInit() { 
    this.authService.isAdmin().subscribe(
    ret => { 
    this.isAdmin = ret; 
    }); 
    this.isAuthSubscription = this.authService.isAuth$ 
    .subscribe(
     val => { 
     this.isAdmin=this.authService.IsAdministrator(); 
     this.isAuthenticated = val 
    }); 
} 

この加入者は、ユーザーがログインしていることを知らせるためである。

私はトリックが私の（内viariableを維持することですグローバル）カスタムサービス。その情報を簡単かつ迅速に取得できるように、適切な状態に更新しておくだけで十分です。

私はこれが誰かを助けることを願っています...