How to implement in Angular2 and multiple layouts?

Question

Angular

I'm making an admin panel in Angular2.
Unauthorized users need to show the authorization layout, not authorized personal account.
There was a problem with lockouts.
In app.component.ts I write The <app-main></app-main>
personal account template is loaded there.
In the same place inside <router-outlet></router-outlet>
And, accordingly, the authorization component is loaded into <router-outlet>
Together with all the menus, headers and footer. And I want that, apart from entering a login and password, there was nothing else.
I would like, under one condition, to <app-main>shove the authorization component, with another component of the personal account.
Please tell me how to do it right.

Answer 1

In theory, you should have a token that you will send to the server to identify the user. So here you can check

<component-with-router-outlet *ngIf="token"></component-with-router-outlet>
<component-with-router-outlet-for-login *ngIf="!token"></component-with-router-outlet-for-login>

And if you get a 401 error saying that the token is not valid or it is not there, then just delete the token from the storage.
I haven't tried it, but if I did, I'd do it like this

Answer 2

There is such an implementation for ui-router:
https://github.com/ui-router/sample-app-angular/bl...