Question

我正在为不同的客户端类型（businessClient，individualClient）创建具有单独仪表板的应用程序。客户端类型随会话上下文一起提供，因此在导航至仪表板之前便已知道。我想使用角度路由器机制根据客户端类型加载适当的仪表板。

我当前的实现方式：

个人和企业客户的单独路径
每个路径都具有canActivate保护功能，可检查当前客户端是否具有基于类型的访问指定仪表板的权限
如果客户端无权访问指定的路由卫士重定向到路由数据部分中指定的网址

路由

{
        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'
                }
            }
        ]
    }

守卫

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]);
        }
    }

我的解决方案效果很好，可以满足我的所有需求，但是我感觉它很难看（尤其是redirectionUrl数据参数）。有没有更好的方法可以使用角路由器实现相同的结果？

Answer 1

您可以跳过两条不同的路线“ dashboard / indv-client-data”和“ dashboard / busi-client-data”。 IF，以便用户无法同时访问两者。相反，只有一条仪表板路线。在仪表板页面内，您可以检查用户类型，并在两个不同的仪表板组件之间进行选择。一种用于indv，另一种用于busi。路由器会简单得多。仅需要顶部路线。当然，您仍然需要实现这两个仪表板，但最终将获得一个更简单的路由并且没有重定向。

基于登录的用户类型的导航-角度

1 个答案: