0

I've got an Angular 2 app (using v2.1.0) with an authentication service to allow the user to login and logout of the app. I want to create a globally available boolean property that can be set when a user logs in or logs out so I can easily show and hide parts of the UI based on the state of the user. Something like isAuthenticated would be fine. However, I'm not entirely sure what the best method is to create a global class/service, or what the recommended method is. I found this question, which does address it, but all of the answers are from way before the final release came out, and I believe are outdated. Currently I have a property on every component where I need to keep track of the logged in state that goes back to the authentication service, but it seems inefficient to me:

IsAuthenticated: boolean = this.authService.isAuthenticated();
Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
Eddie
  • 1,228
  • 3
  • 17
  • 31
  • The first thing is that boolean variable should be a property of some object (service) in order to be accessible across the app. Auth service looks like a reasonable place for it - because it belongs to it! The second thing is that it is beneficial to have it as an observable (subject) instead of scalar property. – Estus Flask Dec 01 '16 at 17:36
  • So if the auth.service is set as a Provider in the app.module, it should be available to all components, correct? If that's the case, do I need to instantiate the auth.service in components where I refer to it? Also, what's the best way to convert a boolean to an Observable? Thanks – Eddie Dec 01 '16 at 17:41
  • It depends on what 'instantiate' means. But generally it should be defined as provider in root injector and injected everywhere else. It depends on how `isAuthenticated()` works. Boolean can't just be 'converted' to observables. Observables should be provided with fresh values by the same mechanisms that set internal auth state returned by `isAuthenticated()`. – Estus Flask Dec 01 '16 at 17:52

3 Answers3

0

You can try use *ngIf to add or remove element | Visibility to hide or show element

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

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

For more detail https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngIf

Albert
  • 94
  • 7
  • Actually, I already have that, but it doesn't update when the state changes. I think it's probably because it's not an Observable... – Eddie Dec 01 '16 at 17:38
0

First you need to declare your authService on app.module provider. 1 instance of authService for all your application.

Next you can do that : 

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

Add a boolean property to your service and default it to false. When the user logs in set it to true. Create a function in your service to return the boolean. Then just call it like you call your login function.

Services are singletons and do just what you are asking for.

Lockless
  • 497
  • 1
  • 5
  • 12