CODEWITHSUNDEEP
angular
POV
POV

Reputation: 12005

How to design the right structure of Angular components?

I have installed Angular using CLI, with a standard structure. Entry point to application is app.module by default.

app.module -> app.component

In the template app.component.html:

<router-outlet>
</ router-outlet>

This template should be visible only after authorization.

The problem is that when I request an authorization page (login page), it is inserted into this private template. What is wrong? The login page should work as a separate page.

How to organize it?

Problem is described in pic:

enter image description here

Upvotes: 0

Views: 156

Answers (1)

JB Nizet
JB Nizet

Reputation: 691635

What you want to keep private before login is not your root component. What you want to keep private is all the page components except the login component.

So you simply need a route configuration like the following:

[
  { 
    path: 'login', 
    component: LoginComponent 
  },
  { 
    path: '', 
    canActivate: [AuthenticatedGuard], 
    children: [
        all your other pages here
    ]
  }  
]

And the AuthenticatedGuard should prevent the activation and navigate to the login route if the user is not authenticated yet.

Regarding the second part of your question. the problem is that your root component template contains much more than what you claim in the first part: it contains a left menu in addition to the router outlet. Remove that from the root component, since you don't want that side bar on all of the pages: the login page shouldn't have it. Instead, put it in a separate "sub-root" component, that we'll call the main component. This component should have the left menu, and a (second) router-outlet in its template.

 [
  { 
    path: 'login', 
    component: LoginComponent 
  },
  { 
    path: '', 
    canActivate: [AuthenticatedGuard], 
    component: MainComponent,
    children: [
      // all your page components here
    ]
  }  
]

An alternative would be to keep it as in the first part of the answer, and to simply add an *ngIf on the left menu to test if the user is authenticated or not.

Upvotes: 1

Related Questions