ユーザーがログインしたとき、またはログアウトしたときにのみ要素を表示するにはどうすればよいですか？

Question

私はAngular 2+アプリを開発中です。 AngularJSでは比較的単純なものを実装することは非常に困難です。

私は彼女があるときにユーザーがログインしてLOG OUTされていない場合 INボタンLOGを表示するために私の上部のナビゲーションをしたいと思います。

私はあらゆることを試みてきましたが、正しく動作させることはできません。私はそれが全体のアプリ間で、一貫して仕事をしたい、と私の現在の実装がまったく機能していない

---

かかわらず、リロードの（isLoggedInlocalStorageにそれが格納）、しかし、あなたが言うことができるので、私はここでそれを共有しましょうもし私が少なくとも正しい場所にいるなら、私は私を救います。

トップnavigation.component.html

<p class="nav-item my-2 my-lg-0" *ngIf="!isLoggedIn | async"><a class="nav-link" routerLink="/login" routerLinkActive="active">Login</a></p> 
    <p class="nav-item my-2 my-lg-0" *ngIf="isLoggedIn | async"><a class="nav-link" routerLink="//logout" routerLinkActive="active">Logout</a></p> 

トップnavigation.component.ts

export class TopNavigationComponent implements OnInit { 

    @ViewChild('topnav') topnav: ElementRef; 
    //isLoggedIn: boolean; 

    isLoggedIn: Observable<Boolean>; 

    constructor(private authService: AuthService, private logger: LoggerService) { } 

    ngOnInit() { 
    this.isLoggedIn = this.authService.getIsLoggedIn(); 
    } 

auth.service.ts

@Injectable() 
export class AuthService { 

    loggedIn$: Subject<Boolean> = new Subject<Boolean>(); 

    constructor(private logger: LoggerService) { 
    let isLoggedInLocalStore = (localStorage.getItem('isLoggedIn') === 'true'); 
    if (!isLoggedInLocalStore) { 
     isLoggedInLocalStore = false; 
     localStorage.setItem('isLoggedIn', isLoggedInLocalStore.toString()); 
    } 
    } 

    getIsLoggedIn(): Observable<Boolean> { 
    //return (localStorage.getItem('isLoggedIn') === 'true'); 
    return this.loggedIn$.asObservable(); 
    } 

    login(): void { 
    // TODO 
    this.logger.log("AuthService | Login clicked..."); 
    localStorage.setItem('isLoggedIn', 'true'); 
    this.loggedIn$.next(true); 
    } 

    logout() { 
    // TODO 
    localStorage.setItem('isLoggedIn', 'false'); 
    this.loggedIn$.next(false); 
    } 

} 

Answer 1

あなたが見ているのは、Shared Service Centralを使用するか、またはEvent Emittersをこの目的に使用することです。

ローカルストレージと組み合わせて使用​​する必要があります。ユーザーがログインすると、共有サービスとローカルストレージにデータを保存する必要があります。これにより、彼がログアウトすると、すべてのデータをローカルストレージに保存し、ユーザーがログインしているかどうかを確認することができます。

ログアウトボタンを押したときローカルストレージと共有サービスからローカル値を削除します。

ここで、[ログイン]ボタンと[ログアウト]ボタンを表示する方法は、イベントエミッターと共有サービスが魔法を唱えるところです。共有サービスに値を追加するとObservableが生成され、ObservableコンポーネントとObservingコンポーネントによって強調表示されます。IfとElseを使用してボタンを表示します。

Working Example

Answer 2

あなたは正しい方法を使用して、少し修正を加えている：あなたのトップnavigation.component.tsで

：

isLoggedIn:boolean; 

constructor(private cd:ChangeDetectorRef, private authService: AuthService, private logger: LoggerService) { 
     this.authService.getIsLoggedIn().subscribe((loggedIn:boolean) => { 
     this.isLoggedIn = loggedIn; 
     this.cd.markForCheck();} 
} 

そして、あなたのauth.service.tsで：

getIsLoggedIn(): Subject<Boolean> { 
    return this.loggedIn$; 
} 

削除|あなたのHTMLからの非同期。

あなたがログインしたときはいつでも、サービスからあなたのサブジェクトを真に送信し、ユーザーがログアウトしたときにすべてのサブスクライバに通知を受け、同じサブスクライバに通知します。

Answer 3

私の答えがあなたに役立つとは確信していません。このような目的のために、私はGlobalEventsManagerという名前のサービスを作成しました。

import { Injectable } from '@angular/core'; 
import { BehaviorSubject } from "rxjs/BehaviorSubject"; 
import { Observable } from "rxjs/Observable"; 

@Injectable() 
export class GlobalEventsManager { 

    private _showMainMenu: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null); 
    public showMainMenuEmitter: Observable<boolean> = this._showMainMenu.asObservable(); 

    constructor() { 
     this.showMainMenu(Boolean(localStorage.getItem('currentUser'))); 
    } 

    showMainMenu(ifShow: boolean) { 
     this._showMainMenu.next(ifShow); 
    } 


} 

この例では、表示/非表示のメニューは、ユーザーがログインしているか、ログアウトしているかによって異なります。あなたは（クラスのない完全なコード、単なる一例）、それを使用するにはどうすればよい ：

import { GlobalEventsManager } from "../../core/_helpers/index"; 
export class ExampleClass implements OnInit { 
    constructor(private globalEventsManager: GlobalEventsManager) { 

    } 

    login(): void { 
     //Your code 
     ... 
     //Show main menu for authentificated users 
     this.globalEventsManager.showMainMenu(true) 
    } 

    logout(): void { 
     //Your code 
     ... 
     //Hide main menu 
     this.globalEventsManager.showMainMenu(false) 
    } 

} 

そして、どのように、あなたのコンポーネント（ない完全なコード、単なる一例）でそれを使用することができます。

import { GlobalEventsManager } from '/_helpers/index'; 


@Component({ 
    selector: "main-menu", 
    templateUrl: "main-menu.component.html", 
}) 

export class MainMenuComponent { 
    showMainMenu: boolean = false; 


    constructor(private globalEventsManager: GlobalEventsManager) { 
     this.globalEventsManager.showMainMenuEmitter.subscribe((mode) => { 
      // mode will be null the first time it is created, so you need to igonore it when null 
      if (mode !== null) { 
       this.showMainMenu = mode; 
      } 
     }); 
    } 

    //Other code 
    ... 
    ... 
    ... 
} 

そして、今あなたはboolean showMainMenu変数があなたのユーザーによって異なります。

PS：このGlobalEventsManagerは、他の目的でも使用できます。例えば。アプリケーションに影響するグローバルなイベントを管理します。

PPS：約1年前にstackoverflowで同様の解決策が見つかりました。ちょうど私はリンクを見つけることができませんでした。したがって、ここでその解決方法を説明しようとしました。

ありがとうございました。それがあなたを助けることを願っています。