1

I have a large project using Angular's App Shell Model. I am also using Angular MSAL.js (v2) (though this question may not be specific to MSAL).

I have my app project routes protected using the MsalGuard in my case. However, I want to invoke the guard checks prior to the app-shell building as well, rather than the projects that are injected into the app-shell. Basically, I want my guard to be checked before anything is loaded, including the app-shell.

Since all my routing is set up inside of each project, the guard is only being triggered after the app-shell builds, which starts a lot more pieces of the app before I can redirect to the login page (if the guard is triggered)

What I have tried to do, is set up a generic route guard in the app-shell in attempt of triggering the guard before loading the shell.

app-shell-routing.module.ts

// imports...
const routes: Routes = [{ path: '', component: AppShellComponent, canLoad: [MsalGuard] }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppShellRoutingModule {}

app-shell.module.ts

// imports and other configs...
...
imports: [
  ...
  AppShellRoutingModule
]
...

However, this does not guard the app-shell from being built, and it is still built prior to the authentication redirect (from the guard returning false). The result is the same with canLoad and canActivate.

Is it possible to guard the app-shell so that a condition needs to be true before loading the entire shell rather than only protecting the projects loaded into the shell?

The total load time may be exactly the same (one loading happening before and after route guard, and the other all of the loading after), but I feel this would be a better user experience to go right to the authentication if the guard is returned false.

Jeremy
  • 1,038
  • 11
  • 34
  • Your `AppShellComponent` is eagerly loaded. Even if the guard returns false, the component is loaded either way. I think you would have to turn the `AppShellComponent` into a module and lazy-load it as a child of the root path in the routes. – dj11223344 Jan 10 '22 at 19:49
  • I guess you are looking for MsalRedirectComponent. See for more information https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/redirects.md – Vugar Abdullayev Jan 11 '22 at 23:42

2 Answers2

0

I'm not sure about your guard, but if you want to prevent the application from loading you could hook into the APP_INITIALIZER in your root module: https://angular.io/api/core/APP_INITIALIZER. If the user is not allowed you can redirect etc... there's a few examples in the documentation.

Mathew Berg
  • 28,625
  • 11
  • 69
  • 90
0

Is it possible to guard the app-shell so that a condition needs to be true before loading the entire shell rather than only protecting the projects loaded into the shell?

From my understanding - no - the App Shell is created at build time, and creates static HTML - so the canLoad guard won't help there. App Shell Documentation

So the only chance I see is to check the state of user in the index.html before Angular boots up. This probably can be done using the "standard" JavaScript msval APIs, checking whether the user is logged in and if not hide the <app-root>.

ChrisY
  • 1,681
  • 10
  • 12