Angular 2 Admin navigation / routes separate from client side navigation / routes

Here is a possible solution using basic routing and guard to protect specific routes for admin privileges only.

In your routing configuration, you define two main routes /user

and /admin

. Then you can define child routes for these two main routes where they will extend from the parent route (example /admin/dashboard

or /user/account

)

You can then regulate who has access to these routes based on the user's role or whatever you decide. If you are saving user data to local storage, you can also save user roles.

Below is an untested example. I have comments inside code blocks with little explanation. I've also provided some links for writing routing and guard posts. Hope this helps a little.

Routing configuration

app.routing.ts

import { NgModule } from '@angular/core';


import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admindashboard.component';
import { UserAccountComponent } from './useraccount.component';
import { UserComponent } from './user.component';

import { RoleGuard } from './role.guard';

const appRoutes: Routes = [
  {
    path: 'user',
    canActivateChild: [RoleGuard],        // <-- This guard will run before the router directs you to the route
    data: { roles : ['ROLE_USER'] },      // <-- Current Login in user must have role user.   You can access this array inside your guard.
    children: [
      {
        path: '',                    // <-- This should equal /user
        component: UserComponent,
        pathMatch: 'full'
      },
      {
        path: 'account',              // <-- This should equal /user/account
        component: UserAccountComponent,
        pathMatch: 'full'
      }
      // <-- The rest of your user routes
    ]
  },
  {
    path: 'admin',
    canActivateChild: [RoleGuard],         // <-- This guard will run before the router directs you to the route
    data: { roles : ['ROLE_ADMIN'] },      // <-- Current Login in user must have role admin
    children: [
      {
        path: '',
        redirectTo: '/admin/dashboard'   // <-- Redirects to dashboard route below
      },
      {
        path: 'dashboard',
        component: AdminDashboardComponent,
        pathMatch: 'full'
      }
      // <-- The rest of your admin routes
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, { useHash: true })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

      

        
        
        
      

    

Role Defense

role.guard.ts

import { Injectable } from '@angular/core';
import { Router, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class RoleGuard implements CanActivateChild {

  constructor(
    private router: Router
  ) {}

  canActivateChild(route: ActivatedRouteSnapshot, 
       state: RouterStateSnapshot): boolean {

    const userRoles: string[] = this.authService.getRoles();  // <--------- get the current user roles
    const routeRoles: string[] = route.data['roles'];   // <------- Will get the roles arry you defined in your router config

    /*
      Now you can do your logic to determine if the user has the appropriate role.
      If they do return true
      Else use router to set a redirect route to /user url or whereever you feel like and return false;
    */

  }
}

      

        
        
        
      

    

Angular Router http://blog.angular-university.io/angular2-router/

Angular Kids Routes https://angular-2-training-book.rangle.io/handout/routing/child_routes.html

Angular CanActivateChild https://angular.io/api/router/CanActivateChild

More about routing https://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html