2

I have a lazy loaded module with canActivate guard and after the lazily loaded module is loaded, somehow the page is made unauthenticated (say by logging in as a different role in different tab of same browser), so when we try to access previous lazily loaded module's components they are successfully accessed on previously loaded tab. Can anyone please explain why this happens or any other way to handle such scenario?

Note: I have more than one lazily loaded modules loaded on basis of user role, lazily loaded modules may have same one or more Child components

Code:

main-routing.module.ts

{
    path: 'admin',
    loadChildren: 'app/featureModules/admin/admin.module#AdminModule',
    canActivate: [ AdminGuardService]
},{
    path: 'staff',
    loadChildren: 'app/featureModules/staff/staff.module#StaffModule',
    canActivate: [ StaffGuardService]
  }

In staff-routing.ts 

{
    path: '',
    loadChildren: 'app/featureModules/property-details-view/property-details-view.module#PropertyDetailsViewModule'
  }

In admin-routing.ts 

 {
    path: '',
    loadChildren: 'app/featureModules/property-details-view/property-details-view.module#PropertyDetailsViewModule'
  }

StaffGuardService and AdminGuardService validates the role of user and allows the access to corresponding route.

khush
  • 2,702
  • 2
  • 16
  • 35
  • It's always best to show the offending code. Are you 100% sure that this issue has to do with the lazy loading? Is it not perhaps a routing issue or maybe the guard is not running when you expect it is. – Andrew Aug 14 '18 at 08:32

1 Answers1

0

Try this

import { DashboardComponent } from './shared/dashboard/dashboard.component';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuardService } from './services/auth-guard.service';

export const appRouters: Routes = [
  { path: 'login', loadChildren: 'app/shared/login/login.module#LoginModule' },
  {
    path: 'pages', component: DashboardComponent, children: [
      { path: '', loadChildren: 'app/pages/company/company.module#CompanyModule' },
      { path: 'company', loadChildren: 'app/pages/company/company.module#CompanyModule' },
      { path: 'user', loadChildren: 'app/pages/user/user.module#UserModule' },
      { path: 'school', loadChildren: 'app/pages/school/school.module#SchoolModule' },
      { path: 'activity', loadChildren: 'app/pages/activity/activity.module#ActivityModule' },
    ],
    canActivate: [AuthGuardService]
  },
  { path: '**', redirectTo: "pages" }
];

export const AppRoutingProviders: any[] = [

];

export const MyRouterModule: ModuleWithProviders = RouterModule.forRoot(appRouters);

//About AuthGuardService
@Injectable()
export class AuthGuardService implements CanActivate {

  constructor(private authService: AuthService, private router: Router,
    private activatedRoute: ActivatedRoute,
    private cookieService: CookieService) { }

  canActivate(_: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return hasLoginLogic // should be boolean type
  }
}
Andy Silver
  • 36
  • 2