2016-12-01 7 views
0

Ich habe eine Angular 2 App (mit v2.1.0) mit einem Authentifizierungsdienst, um es dem Benutzer zu ermöglichen, sich an der App an- und abzumelden. Ich möchte eine global verfügbare boolesche Eigenschaft erstellen, die festgelegt werden kann, wenn sich ein Benutzer anmeldet oder abmeldet, sodass ich Teile der Benutzeroberfläche je nach Status des Benutzers problemlos ein- und ausblenden kann. Etwas wie isAuthenticated wäre in Ordnung. Ich bin jedoch nicht ganz sicher, was die beste Methode ist, um eine globale Klasse/Service zu erstellen, oder was die empfohlene Methode ist. Ich fand this Frage, die es anspricht, aber alle Antworten stammen aus der Zeit, bevor die endgültige Veröffentlichung herauskam, und ich glaube, dass sie veraltet sind. Zur Zeit habe ich eine Eigenschaft auf jeder Komponente, wo ich Spur des angemeldeten Zustand zu halten, muß die zurück zu dem Authentifizierungsdienst geht, aber es scheint mir, ineffizient:Angular 2: Erstellen einer globalen, einstellbaren, beobachtbaren Eigenschaft?

IsAuthenticated: boolean = this.authService.isAuthenticated(); 
+0

Die erste Sache ist, dass boolesche Variable eine Eigenschaft eines Objekts (Dienst) sein sollte, um in der App zugänglich zu sein. Der Auth-Dienst scheint ein vernünftiger Ort dafür zu sein - weil er dazu gehört! Die zweite Sache ist, dass es vorteilhaft ist, sie als beobachtbares (Subjekt) anstelle von skalarer Eigenschaft zu haben. – estus

+0

Wenn also der Auth.service als Provider im app.module eingestellt ist, sollte er für alle Komponenten verfügbar sein, richtig? Wenn das der Fall ist, muss ich den Auth.service in Komponenten instanziieren, auf die ich mich beziehe? Wie kann man einen Booleschen Wert am besten in einen Observable umwandeln? Danke – Eddie

+0

Es hängt davon ab, was 'instanziieren' bedeutet. Aber im Allgemeinen sollte es als Anbieter in Root-Injektor definiert und überall sonst injiziert werden. Es hängt davon ab, wie 'isAuthenticated()' funktioniert. Boolean kann nicht einfach in Observables "umgewandelt" werden. Observables sollten mit denselben Mechanismen versehen werden, die den von 'isAuthenticated()' zurückgegebenen internen auth-Zustand setzen. – estus

Antwort

0

Sie können Gebrauch * ngIf versuchen oder hinzufügen Element entfernen | Sichtbarkeit ein- oder ausgeblendet Element

<div *ngIf="IsAuthenticated">Content</div> //add or remove 

<div [class.hidden]="!IsAuthenticated">Show with class</div> //show or hide 

Weitere Einzelheiten https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngIf

+0

Eigentlich habe ich das schon, aber es wird nicht aktualisiert, wenn sich der Status ändert. Ich denke es ist wahrscheinlich, weil es kein Observable ist ... Eddie

0

Zuerst müssen Sie Ihren authService auf app.module Anbieter erklären. 1 Instanz von authService für alle Ihre Anwendungen.

Als nächstes können Sie das tun:

<a *ngIf="!authService.isAuthenticated()" [routerLink]="['/login']">Login</a> 
0

eine boolean-Eigenschaft auf Ihren Dienst hinzufügen und es auf false Standard. Wenn sich der Benutzer anmeldet, setzen Sie ihn auf true. Erstellen Sie eine Funktion in Ihrem Dienst, um den booleschen Wert zurückzugeben. Dann rufe es einfach so an, als würdest du deine Login-Funktion aufrufen.

Dienstleistungen sind Singletons und tun genau das, was Sie verlangen.

Verwandte Themen