How to use dynamic default route in Angular2?

Question

Problem: Depending on user's permission another default route should be used.

@RouteConfig([
    { path: '/x1', name: 'x1', component: X1Component, useAsDefault: true },
    { path: '/x2', name: 'x2', component: X2Component},
    { path: '/x3', name: 'x3', component: X3Component},
    { path: '/x4', name: 'x4', component: X4Component},
    { path: '/x5', name: 'x5', component: X5Component}
])

Given x1 as a default route in above RouteConfig but current user does not have permission to access this page, x2 should be used as default route if permission will be granted and so on.

Anyway, we've tried the attribute loader already. The problem there is, that the url won't be updated (eg from /x1 to x2 ) and this occurs other problems such as not having the css class router-link-active automatically attached to a link in our menu.

Of course we could write an workaround but how are you solving this kind of problem?

Answer 1

I don't think changing which route is the default route is possible at runtime.

I think a common approach would be to add a @CanActivate() decorator to your components that require login and if the user is not actually logged in, redirect to the appropriate route.

To know whether the current user is logged in you probably want to use DI to get global information about the user state.
You also need a reference to the root router instance which you can get from DI. Using DI in @CanActivate() is currently not directly supported but the discussion in the related Angular2 issue provides a workaround (with Plunker links) to get a reference to the global injector.

See also Redirect to a different component inside @CanActivate in Angular2

Answer 2

To change the default route of an Angular application dynamically, at the moment I am using the following approach.

The last fallback route with a guard:

...
{
    path: '**',
    canActivate: [DynamicDefaultRouteGuard],
    pathMatch: 'full'
}

The guard is the following:

@Injectable({
    providedIn: 'root'
})
export class DynamicDefaultRouteGuard implements CanActivate {
    constructor(private router: Router, private dynamicDefaultMenuSectionService: DynamicDefaultMenuSectionService) {}

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        console.warn(
            `Fallback main module route reached. Redirecting to ${this.dynamicDefaultMenuSectionService.defaultMenuSection}...`
        );

        return this.router.createUrlTree([this.dynamicDefaultMenuSectionService.defaultMenuSection]);
    }
}

where dynamicDefaultMenuSectionService.defaultMenuSection is a variable with a default route. This variable is initialized during app initialization (APP_INITIALIZER) but it can be changed any time.