In Angular, is it possible to load different modules depending upon whether the user is authenticated or not?

Question

For example, the URL: www.example.com should load one module if the user is authenticated, else it should load a different module.

I have tried using guards, but it didn't work as I expect it to.

I am pretty new to Angular. It would be much appreciated if someone could write a sample routes array for demonstration. :)

If the user is not authenticated, I want my routes to work something like below:

  {
    path: '',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    path: 'login',
    loadChildren: './login/login.module#LoginModule'
  },
  {
    path: 'register',
    loadChildren: './register/register.module#RegisterModule'
  }

Else, if the user is authenticated, I want my routes to work something like below:

  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/dashboard'
  },
  {
    path: 'dashboard',
    loadChildren: './dashboard/dashboard.module#DashboardModule'
  },
  {
    path: 'profile',
    loadChildren: './user-profile/user-profile.module#UserProfileModule'
  }

read this article, you need `route guard` https://medium.com/@ryanchenkie_40935/angular-authentication-using-route-guards-bf7a4ca13ae3 — Reza, Dec 26 '18 at 15:23

nircraft · Accepted Answer · 2018-12-26T18:55:00.740

Yes, you can achieve this using the CanActivate guard (checking route access).

CanActivate Checks to see if a user can visit a route.

Having said that I would expect you to redirect to a different route after guardCheck.

You should not have the router configuration to accommodate two different components or modules on same route. You can add them as child of a route and decide routing if you need them on same route.

Update:

I came across the concept of matcher which can be used to load two different routes at same path:

const routes: Routes = [{
  path: 'list',
  matcher: matcherForAuthenticatedRoute,
  loadChildren: './user/register#RegisterModule'
},
{
  path: 'list',
  matcher: matcherForTheOtherRoute,
  loadChildren: './user/home#HomeModule'
}]

Now our matching logic depends on two functions, that can be as below:

export function matcherForAuthenticatedRoute(
 segments: UrlSegment[],
 group: UrlSegmentGroup,
 route: Route) {
  const userService =  appInjector.get(MyService);
  const isPathMatch = segments[0].path === route.path;
  const isUserAuthenticated = userService.isUserAuthenticated('userId');      
  if(isPathMatch && isUserTypeMatch) { 
    return {consumed: [segments[0]]};
  } else {
    return null;
  }
}

We can define appInjector after bootstraping the app and export it to be used:

appInjector = componentRef.injector;

I also want this if the user is authenticated: { path: '', loadChildren: './dashboard/dashboard.module#DashboardModule' } — , Dec 26 '18 at 17:05
How should I load two completely different modules on the same URL, with the condition user is authenticated or not? — , Dec 26 '18 at 17:07
I would expect you to redirect to a diffrent route after guardCheck. You can't have the router configuration to accommodate two different components or modules on same route. You can add them as child of a route and decide routing if you need them on same route. — nircraft, Dec 26 '18 at 17:21
@FaisalAlam, check this may be helpful for what you need: https://medium.com/@lenseg1/loading-different-angular-modules-or-components-on-routes-with-same-path-2bb9ba4b6566 — nircraft, Dec 26 '18 at 17:25

In Angular, is it possible to load different modules depending upon whether the user is authenticated or not?

1 Answers1