4

I would like to setup my Angular routes to do the following:

Landing page of website (http://localhost:4200) and any other routes should go to the LoginComponent if user is not logged in.

Landing page of website (http://localhost:4200) and any unmatched routes should go to the DashboardComponent if user is logged in. If route is matched should go to correct Component.

All matched routes should be protected by the AuthGuard which checks if the user is logged in. If user is not logged in they should end up on LoginComponent. (AuthGuard handles this redirect).

One major issue that I am facing is that I do not want the LoginComponent to be part of my app.component structure which has a router outlet in it (i.e. header, footer, sidebar). Instead I just want the login page to only display what is in LoginComponent.html.

Here are my current routes:

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full', canActivate: [AuthGuard] },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'projects', component: ProjectListComponent, canActivate: [AuthGuard] },
  { path: 'projects/new', component: ProjectDetailComponent, canActivate: [AuthGuard] },
  { path: 'projects/edit/:id', component: ProjectDetailComponent, canActivate: [AuthGuard] }
];
Blake Rivell
  • 13,105
  • 31
  • 115
  • 231
  • One simple way is you can use *ngIf directive to hide the header & footer part if the user is not logged in. – Akilesh Kumar R Aug 09 '18 at 14:44
  • @AkileshKumarR My layout is way too complicated for that. I prefer just a simple clean login page without the entire site structure. I believe I can use multiple router-outlets. Is this possible? – Blake Rivell Aug 09 '18 at 14:46
  • I actually found a post that explains this: https://stackoverflow.com/questions/40508557/multiple-layout-for-different-pages-in-angular-2 – Blake Rivell Aug 09 '18 at 15:28
  • Check out this it will give some idea about clean template for login https://stackblitz.com/edit/angular-x4jgxs – Akilesh Kumar R Aug 09 '18 at 15:30

4 Answers4

6

One problem with the AuthGuard approach is that you could pass the AuthGuard and then your session at the backend expires. However, you will not get kicked out until you change route.

To overcome this people generally use an HTTP interceptor. An interceptor basically kicks you out if any HTTP request responds with 401 Unauthorised by redirecting to the login page (unless you are already on the login page).

This way, if the user does not change route and starts clicking about and the backend responds 401, the user is kicked out even if they do not change route.

Whilst this does not answer your question it is highly relevant.

Hope it helps.

danday74
  • 52,471
  • 49
  • 232
  • 283
2
**In app.routing.ts**

  routes: Routes = [
        {
            path: '',
            component: LoginComponent,
            children: [
              {
                path: 'login',
                canActivate: [AuthGuard]
              }
            ]
        },
        {
             path: '', component: WebLayoutComponent,canActivate: [AuthGuard],
             children: [
                { path: '',redirectTo: 'dashboard', component: dashboardComponent, canActivate: [AuthGuard] },
                { path: 'dashboard', component: dashboardComponent,canActivate: [AuthGuard]},
                { path: 'matchedroute1', component: matchedRouteComponent, canActivate: [AuthGuard]},
                { path: 'matchedroute2', component: matchedRouteComponent, canActivate: [AuthGuard]}
             ]
        }
    ]
**In auth.guard.ts**

        import { Router, ActivatedRoute } from '@angular/router';
    import { routes } from '../app.routing';

    @Injectable()
    export class AuthGuard  {
       constructor(private router: Router,private activatedRoute: ActivatedRoute) { 

       }

      canActivate(routeerstate?: any) {
       let url = routeerstate._routerState.url; // this url is unactivated route which the user is trying to enter;
      let validRoutes = routes;
      url = url.replace(/\//g,"");
      const isRouteValid = validRoutes.findIndex((item) => item.path === url) > -1 ? true : false; 
      if(isRouteValid){
         if(this.isLoggedIn()) {
          if(url === 'login'){
            this.router.navigate(['dashboard']);
          } else {
            return true;
          }
         } else {
            this.router.navigate(['login']);
         }
       } else { 
        if(this.isLoggedIn()) { // not valid route and logged In
            this.router.navigate(['dashboard']);
        }
       }

      }

      isLoggedIn() {
        //write your authentication and authorization code and return true or false
      }
    }

**In app.component.html**

<router-outlet></router-outlet>

**In webLayout.component.html**

<div class= "container">
    <app-header></app-header>
    <app-ad></app-ad>
</div>
<router-outlet ></router-outlet>
<footer-container></footer-container>
Bhimashankar Mantur
  • 189
  • 1
  • 3
  • 12
1

You can use two different layout components just like what I did in my application.



    const routes: Routes = [
    {
        path: '',
        component: HomeLayoutComponent,
        canActivate: [AuthGuard],
        children: [
          {
            path: '',
            redirectTo: 'dashboard',
            pathMatch: 'full'
          },
          {
            path: 'dashboard',
            loadChildren: './view/dashboard/dashboard.module#DashboardModule'
          },
          ...
        ]
      },
      {
        path: '',
        component: LoginLayoutComponent,
        children: [
          {
            path: 'login',
            loadChildren: './view/login/login.module#LoginModule'
          }
        ]
      }
    ];

In this way, you can hide your app header and sidebar (if existed) in the LoginLayoutComponent, but keep them in the HomeLayoutComponent.

Then in the AuthGuard, you should check if the user has logged in. If not, then 

this.router.navigate(['/login']);

That should do the trick.

Charles Zhao
  • 158
  • 11
0

app routes

const approutes : Routes = [
  {path:"",component:LoginComponent},
  {path:"dashboard",component:DashboardComponent},
];

app.component.ts

import { Component, Input } from '@angular/core';
import {Router} from '@angular/router';
@Component({
  selector: 'login',
  template: `<h1>Hello {{name}}!</h1><a  [routerLink] = "['/dashboard']" class="hvr-ripple-in">Login</a>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class LoginComponent  {
  name:string = "Login here implement your login action !"
   constructor(private _route:Router) {
  }
}

app.component.html

<router-outlet></router-outlet>

navbar.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-navbar',
  template: `<h1>{{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class NavbarComponent  {
  name:string = "Navbar content"
}

footer.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-footer',
  template: `<h1>{{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class FooterComponent  {
  name:string = "Footer content"
}

template.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-template',
  template: `<my-navbar></my-navbar><ng-content></ng-content><my-footer></my-footer>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class TemplateComponent  {  
}

dashboard.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'dashboard',
  template: `<my-template><h1>Hello {{name}}!</h1></my-template>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class DashboardComponent  {
  name:string = "Dashboard content";
}

So, if the routes path is empty the login component is called with separate layout. And for dashboard the separate layout is called since it is wrapped inside the template component. In this manner you can achieve the clean template for login component. You can also implement the CanActivate functionality in your router for restricting user to access the page without loggedin.

Check out this sample which i had made for your reference. https://stackblitz.com/edit/angular-x4jgxs

Akilesh Kumar R
  • 398
  • 2
  • 5