CODEWITHSUNDEEP
angularangular-routingangular-routerangular-router-guards
Salarenko
Salarenko

Reputation: 125

Navigation based on logged user type - Angular

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:

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?

Upvotes: 0

Views: 434

Answers (1)

Jens Alenius
Jens Alenius

Reputation: 1931

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.

Upvotes: 1

Related Questions