0

I'm creating application with separate dashboards for different client types (businessClient, individualClient). Client type comes with session context, so it is known before navigation to dashboard starts. I would like to load proper dashboard based on client type using angular router mechanisms.

My current implementation:

  • separate paths for individual and business client
  • each path has canActivate guard checking if current client has type based access to specified dashboard
  • if client has no access to specified route guard redirects to url specified in route data section

Routing

{
        path: 'dashboard',
        component: DashboardComponent,
        children: [
            {
                path: '',
                pathMatch: 'full',
                redirectTo: 'indv-client-data'
            },
            {
                path: 'indv-client-data',
                canActivate: [IsProperClientTypeGuard],
                resolve: {
                    clientData: IndvClientDataResolver
                },
                component: IndvClientDataComponent,
                data: {
                    clientType: ClientType.INDIVIDUAL,
                    redirectionUrl: 'busi-client-data'
                }
            },
            {
                path: 'busi-client-data',
                canActivate: [IsProperClientTypeGuard],
                resolve: {
                    clientData: BusiClientDataResolver
                },
                component: BusiClientDataComponent,
                data: {
                    clientType: ClientType.BUSINESS,
                    redirectionUrl: 'indv-client-data'
                }
            }
        ]
    }

Guard

public canActivate(route: ActivatedRouteSnapshot): boolean {

        const clientType = route.data['clientType'];
        const redirectionUrl = route.data['redirectionUrl'];

        if (this._sessionContext.clientType === clientType) {
            return true;
        } else {
            this._router.navigate([redirectionUrl]);
        }
    }

My solution works well, covering all my needs, but i have a feeling that it's pretty ugly (especially redirectionUrl data parameter). Is there a better way to achieve same result using angular router?

Salarenko
  • 105
  • 5

1 Answers1

1

You could skip the two different routes 'dashboard/indv-client-data' and 'dashboard/busi-client-data'. IF it so that the user cannot access both. Instead only have one dashboard route. Inside the dashboard page you can check what type of user it is and choose between two different dashboard components. One for the indv and one for the busi. The router would be much simpler. Only the top route would be needed. You will of cource still need to implement the two dashboards but you will end up with a simpler routing and no redirects.

Jens Alenius
  • 1,931
  • 2
  • 16
  • 20
  • I've also considered solution with dynamic components swap instead of routing, but I would like to take advantage of route resolvers and other features. Business and client dashboard have different source of resolved data and other router based features (like breadcrumb), that's why I would like to stick with router based solution. – Salarenko Aug 20 '19 at 07:21
  • 1
    ok. I often find the router useful and even fantastic. But in this case I would not use it, because the solution is more complicated. Resolvers are great but it does not mean that you should never get data direct in a component. It depends on the situation.But in your case you could still have a resolver that checks what kind of client it is and load depending on that. In you route example the end user will see different routes depending on what user role he is, but he might not even consider that. – Jens Alenius Aug 20 '19 at 07:31