Angular2 Routing Design - Default navigation components vs. Login

Question

I'm looking for some advice on what the intended design in Angular2 is for a loggedIn vs. !loggedIn view.

If my user is logged in, I want a navigation and menu bar component be shown by default - therefore I'd place it outside the router-outlet that displays the current routes view.

The routes are protected by a route guard which redirects to a login page if the user is not logged in.

Here's the catch tough, I obviously do not want the menu and navigation to show if the user is not logged in yet.

So what's the intended design for this situation? Do I need to use 2 router outlets, one for a loggedIn vs !loggedIn view and one for the actual route component?

Answer 1

Since you are saving a token for future calls to your backend, You can just *ngIf and question your local storage service or what not if the user was logged before based on the existing of the token or what ever logic you use. so doing something like this:

<header id="mysupersecretheader" *ngIf="loggedIn"></header>

if the result is false you will get this on the output html:

<!--template bindings={
  "ng-reflect-ng-if": "false"
}-->

which won't even expose what was intended to be there.

Since everything keeps changing you should read the release notes and the docs, it really helps!!! Here is the template syntax section

Answer 2

But this approach will break when you press the back button of the Browser. i.e It will take you to the login page with valid login. and you get the nav bar visible.