Routing

This section introduces the basic procedure for configuring a lazy-loaded route.

TIP

Vuexy Angular Admin Template provides built-in route transition animation. For more click here.

Overview

Vuexy Angular admin uses the lazy loading (opens new window). Find our template's main router configuration in src/app/app.module.ts file. It includes the sub-module file, which has its own routes (i.e dashboard module).

TIP

Refer to official Angular Route Properties (opens new window)

const appRoutes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./main/dashboard/dashboard.module').then(m => m.DashboardModule)
  },
  {
    path: '',
    redirectTo: '/dashboard/ecommerce',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: '/pages/miscellaneous/error' //Error 404 - Page not found
  }
  ....
]

• Refer to the dashboard routs and follow the same pattern to create Routs for different modules.
• path: '' handles the application initial redirect, which means once you open load app it will redirect to /dashboard/ecommerce change it as per your preference.
• path: '**' handles the application URL which is not valid and redirects to page not found (Error 404).

Route Protection (Role-Based)

Add route protection with role-based access for the particular route. You can add Router Protection using Auth Guard service.

const routes = [
  {
    path: 'analytics',
    component: AnalyticsComponent,
    canActivate: [AuthGuard],
    data: { roles: [Role.Admin] },
    resolve: {
      css: DashboardService,
      inv: InvoiceListService
    }
  },
  {
    path: 'ecommerce',
    component: EcommerceComponent,
    canActivate: [AuthGuard],
    resolve: {
      css: DashboardService
    }
  }
]

TIP

Refer Authentication for more details on JWT Role-Based access usage.

Refer to the above code which we have used in dashboard.module.ts.

• Use canActivate property to enable router protection (Can't accessible unless the user is logged in). Use it on root/submodule as per requirement.
• Use data property to defines the role based access. i.e In Analytics Dashboard we have to assign Admin Role data: { roles: [Role.Admin] } to make it accessible to Admin users only.
  • If you do not use this property then the route is accessible to every logged-in user.
  • You can also assign specific routes to multiple users i.e data: { roles: [Role.Admin, Role.Client] }
• Don't use Router Protection for pages that should be accessible in order to use your application i.e Login, Register, Page not found, etc...