Wie zeigen Sie Elemente nur an, wenn der Benutzer in Angular 2+ eingeloggt oder abgemeldet ist?

Question

Ich arbeite an einer Angular 2+ App. Ich finde es sehr schwierig, etwas zu implementieren, das in AngularJS relativ einfach war.

würde ich meine Top-Navigation wie ein LOG IN-Taste, um anzuzeigen, wenn der Benutzer nicht angemeldet ist und ein AUSLOGGEN, als sie ist.

Ich habe alle möglichen Dinge versucht, aber ich kann es nicht richtig funktionieren. Ich will es konsequent über die gesamte App, arbeiten, und zwar unabhängig von Neuladen (es speichert isLoggedIn zu localStorage)

---

Meine aktuelle Implementierung ist nicht funktioniert, aber ich werde sie hier teilen, so dass Sie sagen können, ich, wenn ich wenigstens irgendwo auf der richtigen Spur bin.

top-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> 

top-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

Was Sie suchen, ist eine zentrale Shared Service oder sogar Event Emitters für diesen Zweck zu verwenden.

Sie müssen dies in Kombination mit Local Storage verwenden. Wenn sich der Benutzer anmeldet, müssen Sie die Daten in einem gemeinsamen Dienst und auch im lokalen Speicher speichern. Damit wird sichergestellt, dass wenn Sie sich abmelden, Sie alle Daten im lokalen Speicher haben und überprüfen können, ob der Benutzer angemeldet ist oder nicht.

Und wenn er die Schaltfläche Abmelden drückt Entferne die lokalen Werte von Lokaler Speicher und Shared Service.

Jetzt, wo die Anmelde- und Abmelde-Schaltflächen angezeigt werden, werden die Ereignis-Emitter und die gemeinsamen Dienste ihre Magie zeigen. Sobald Sie einem Shared-Service Werte hinzufügen, wird ein Observable ausgegeben, auf das die Observing-Komponente verweist. In der Observing-Komponente Verwenden Sie If and Else, um die Buttons anzuzeigen.

Working Example

Answer 2

Sie verwenden den richtigen Weg, aber mit einer wenig Änderungen:

In Ihrem Top-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();} 
} 

Und in Ihrem auth.service.ts :

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

Und entfernen | async von Ihrem HTML.

Immer wenn der Benutzer sich anmeldet, werden Sie true werfen Ihr Thema aus dem Dienst und alle Abonnenten werden benachrichtigt und das gleiche, wenn Benutzer ausgeloggt.

Answer 3

Ich bin mir nicht sicher, ob meine Antwort Ihnen helfen wird. Für solche Zwecke habe ich den Service GlobalEventsManager erstellt.

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


} 

In diesem Beispiel zeigen, I/hide Menü auf Benutzer hängt entweder in oder abgemeldet wird protokolliert. Wie können Sie es verwenden (nicht vollständige Code der Klasse, nur Beispiel):

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

} 

Und wie können Sie es in Ihrer Komponente verwenden (nicht vollständige Code, nur Beispiel):

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

Und Jetzt haben Sie Boolean ShowMainMenu Variable hängt von Ihrem Benutzer ab.

PS: Sie können diesen GlobalEventsManager auch für andere Zwecke verwenden. z.B. um die globalen Ereignisse zu verwalten, die sich auf Ihre Anwendung auswirken sollten.

PPS: Ich habe vor etwa einem Jahr eine ähnliche Lösung auf stackoverflow gefunden. Ich konnte den Link nicht finden. Und deshalb habe ich versucht, die Lösung hier zu beschreiben.

Danke. Hoffe es wird dir helfen.