Conditional Based Auth Guard in angular routing. (Route Protection not just navigation only)

Question

I am creating one angular2 app.

export const routes: Route[] = [
{path: '',redirectTo: "login",pathMatch: "full" }, 
{path: 'login', component: LoginComponent }, 
{path: 'dashboard', component: DashboardComponent,canActivate:[AuthGuard], children:
    [
        { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
        { path: 'A', component: AComponent },
        { path: 'B', component: BComponent },

        { path: 'C', component: CComponent },
        { path: 'D', component: DComponent },
    ]
}];

When i login to my app using LoginComponent it will go to DashboardComponent which have four child components

-A
-B
-C
-D

Now i have by default set redirectTo to my dashboard component. but in place of this redirect i want to redirect to route A,B,C,D on the basis of type of login like wherether he is admin, superadmin, student or teacher.

Suppose

If Login User is "Admin" he should be redirectTo - > dashboard/A

If Login User is "Teacher" then he should be redirectTo - >dashboard/B

i have create authGuard like this

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(public router: Router){ }

    canActivate(){
        if(localStorage.getItem('userData')){
            return true;
        }

        // this.router.navigateByUrl('/');
        return false;
    }
}

export class activateEmployee implements CanActivate {

    constructor(){ }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
        console.log(localStorage.getItem('userData'), "employee");
        if(localStorage.getItem('userData') == 'superadmin'){
            return true;
        }

        // this.router.navigateByUrl('/');
        return false;
    }
}

export class activateSuperAdmin implements CanActivate {

    constructor(public router: Router){ }

    canActivate(){
        console.log(localStorage.getItem('userData'), "Superadmin");
        if(localStorage.getItem('userData') == 'superadmin'){
            return true;
        }

        return false;
    }
}

export class activateAdmin implements CanActivate {

    constructor(public router: Router){ }

    canActivate(){
        console.log(localStorage.getItem('userData'),"Admin");
        if(localStorage.getItem('userData') == 'admin'){
            return true;
        }

        return false;
    }
}

PS: my main goal is to protect route that if someone knows the URL of protected route even than he is not able to go to there. or we can say i want something like multiple authGuard in a single service.

Update

Now i have created different classes for routing, but i am getting this error dont know why ? error is

 Can't resolve all parameters for activateAdmin: (?).

so do you want to redirect inside the guard? somehting like this? — Max Koretskyi
no , i can redirect simply but i want to protect routes like if login role is admin than no can access routes of teacher role or student — Pardeep Jain
but if we just redirect than anyone can acecess protected route as well by just entering URL in browser which is not right way for routing — Pardeep Jain
when you enter the URL in a browser, Angular and the router still runs and the guards run as well. It's no different then navigating inside the app with the link — Max Koretskyi

brijmcq brijmcq · Accepted Answer · 2017-07-20T11:09:58

Instead of creating 4 different route guards, you can refactor it using just one by using switch/if-else in your route guard like this

canActivate(){
  let theRole = localStorage.getItem('userData');
  switch(theRole){
   case "admin": { 
       this.router.navigate(['/dashboard/a']);
      return true;
   } 
   case "teacher": { 
     this.router.navigate(['/dashboard/b']);
      return true;       
   } 
   case "superadmin": {
     this.router.navigate(['/dashboard/c']);
     return true;    
   } 
   case "student": { 
  this.router.navigate(['/dashboard/d']);
    return true;
   }  
   default: { 
    this.router.navigate(['/login'])
     return false;           
   } 
  }

If having 4 different route guards suits you, you don't need to follow the code. At the end, it still boils down to personal preference or practices of your team

Conditional Based Auth Guard in angular routing. (Route Protection not just navigation only)

Update

2 Answers