Q:

Angular 5 / 6. Where do i place my login page?

I want to do an angular website. I would like to have a first page in my app like this:
https://getbootstrap.com/docs/4.1/examples/sign-in/
When you login there you will be able to see your dashboard, similar to next, you can´t view dashboard page without login, so login is the first page of the website:
https://getbootstrap.com/docs/4.1/examples/jumbotron/
I don´t know where to place login page, thinked options (don´t know if they are good):

Create a dedicated component for login page and route to it with rouet-outlet on app-component. I don´t like this option because it makes me include header and footer in each other component.
Created a dedicated component include it on app-component and *ngIf it if the user is not logged. I don´t like this option but i don´t know why, security?
I know there is a much better option (or options), hope you can help me learn.

What about index.html, should i edit this in any case?
Thanks

A:

What you can do is basically have two components, one for login and one for dashboard.
Once you do your authentication in login, E.g through JWT you can store the token to localstorage then add Route Guards on the components that required the user to be authenticated.
Please see: https://angular.io/guide/router#milestone-5-route-guards

