各ページにログイン名と役割を表示する角度2

Question

角度2の方が新しいです。アプリケーションがあり、アプリケーション内のすべてのページで、現在ログインしているユーザー名と割り当てられた役割をヘッダーコンポーネントに表示する必要があります。私が持っている：取得するにはRESTエンドポイントを呼び出すための

• ユーザーモデル（例えば、ユーザ名、役割、そしてその人の名前として表示するために必要なフィールドを持つユーザー・インターフェース）
• ユーザーサービス（サービスクラスを私たちの認証システムからのデータ

ログインからユーザー情報を簡単に取得できますが、これは有効なJSONとして表示されますが、私のサービスを呼び出すことなくすべてのページ（コンポーネント）に表示する方法すべての単一コンポーネント？理想的には、ログインページの後にヘッダーまたは開始コンポーネントがユーザーオブジェクトをロードし、それを後続のすべてのコンパウンドに注入または渡しますntsなので、ユーザーオブジェクトはコンポーネントからコンポーネントに格納されるため、アプリケーションのロード時には1つのhttpコールしか必要ありません。

本質的に私は、これに最もよくストリームされたアプローチを探しています。これは一般的なシナリオのようですが、これに関連する回答を書くほとんどの人は、すべてのコンポーネントでサービスを呼び出すと言っています。これは、すべてのページの読み込みでAPIエンドポイントの呼び出しが開始されることを意味しますか？このデータをセッションまたはクッキーに保存できますか？

ありがとうございます！

Answer 1

ユーザーが保持するサービスを構築できます。私はここに例があります：あなたのための

import { Injectable } from '@angular/core'; 

import { IUser } from './user'; 
import { MessageService } from '../messages/message.service'; 

@Injectable() 
export class AuthService { 
    currentUser: IUser; 
    redirectUrl: string; 

    constructor(private messageService: MessageService) { } 

    isLoggedIn(): boolean { 
     return !!this.currentUser; 
    } 

    login(userName: string, password: string): void { 
     if (!userName || !password) { 
      this.messageService.addMessage('Please enter your userName and password'); 
      return; 
     } 
     if (userName === 'admin') { 
      this.currentUser = { 
       id: 1, 
       userName: userName, 
       isAdmin: true 
      }; 
      this.messageService.addMessage('Admin login'); 
      return; 
     } 
     this.currentUser = { 
      id: 2, 
      userName: userName, 
      isAdmin: false 
     }; 
     this.messageService.addMessage(`User: ${this.currentUser.userName} logged in`); 
    } 

    logout(): void { 
     this.currentUser = null; 
    } 
} 

重要な部分は「CurrentUserに」プロパティです：https://github.com/DeborahK/Angular-Routing

ここでの一枚です。

注：これはサンプルアプリケーションなので、ユーザー情報はハードコードされています。実際のデータを取得する必要があります。