Angular 2 — Making your component auth-aware – NetanelBasal

  • When dealing with cross cutting concerns, AOP (Aspect Oriented Programming) is your best friend.
  • My first approach was in every component to subscribe to the session observable from my store and render what I need based on the status.
  • Not DRY; a cross cutting concern is handled in every component.
  • And then continue following this approach in all my components that needed this kind of functionality.
  • Directive for managing component behavior triggered by login/logout events.

When dealing with cross cutting concerns, AOP (Aspect Oriented Programming) is your best friend. In Angular 2, this is achievable by writing your own Directive. I’m working on my Angular 2 project…

@cport1: “Angular 2 — Making your component auth-aware” by Netanel Basal #Angular #webdev #AngularJS

By: Netanel Basal (Angular Expert) and Yaron Biton, misterBIT.co.il CTO

When dealing with cross cutting concerns, AOP (Aspect Oriented Programming) is your best friend. In Angular 2, this is achievable by writing your own Directive.

library. 

good stuff like actions, reducers, and one-way direction flow, I came to the part that I needed to show or hide templates based on the user session status.

My first approach was in every component to subscribe to the session observable from my store and render what I need based on the status.

So for example in my navigation component:

And then continue following this approach in all my components that needed this kind of functionality.

The solution:

Directive for managing component behavior triggered by login/logout events.

When dealing with cross cutting concerns, AOP (Aspect Oriented Programming) is your best friend. In Angular 2, this is achievable by writing your own Directive. In this case, we are talking about a Structural Directive (such as *ngIf):

“ A Structural directive changes the DOM layout by adding and removing DOM elements. ”

Let me show you the final code and then we can go over the details:

), so we inject both into our component.

coming from, the asterisk in the directive is only syntactic sugar for this code for example:

is just the template tag. Piece-of-mind has been successfully restored.

status change) this is something that is not for this article to cover. Do check out how RxJS and Redux are best buddies to create flux based architectures in Angular.

aspect is handled in a good DRY way:

☞ Please tap or click “︎❤” to help to promote this piece to others.

Angular 2 — Making your component auth-aware – NetanelBasal