angular - 带有权限的面包屑导航

Question

我为面包屑编写了代码，它工作正常，但面临权限问题。示例：一个模块名称：TestModulewhich是延迟加载的，并且有许多组件 ieTestComponent1, TestComponent2,...等。如果我单击面包屑导航，它将类似于 Test Module/Test Component 1TestCOmponent1和类似的TestComponent2. 如果我单击面包屑中的测试模块，它应该重定向到工作正常的测试组件 1，但如果我没有测试组件 1 的权限，那么它会抛出 403 禁止。如果我没有测试组件 1 的权限，我需要它应该重定向到测试组件 2。

我尝试了多种解决方案，但都没有奏效。面包屑代码：

 // Private Helper method to calculate breadcrumb
    private getBreadcrumbs(route: ActivatedRoute, url: string = '', breadcrumbs: Breadcrumb[] = []): Breadcrumb[] {

        const pageTitle = 'pageTitle';

        while (route) {
            // checking router outlet is primary or not
            if (route.outlet !== PRIMARY_OUTLET) {
                return breadcrumbs;
            }
            if (!!(route.snapshot.data.hasOwnProperty(pageTitle))) {
                if (!breadcrumbs.find(item => item.label === route.snapshot.data[pageTitle])) {
                    //If no url is avalailable we are on the root url
                    const routeURL: string = route.snapshot.url.map(segment => segment.path).join('/');
                    if (routeURL !== '' && !!(route.snapshot.data[pageTitle])) {
                        //In the routeURL the complete path is not available,
                        //so we rebuild it each time
                        url += `/${routeURL}`;
                        breadcrumbs.push({
                            label: route.snapshot.data[pageTitle],
                            url: url,
                        });
                    }
                }
            }
            route = route.firstChild;
        }
        return breadcrumbs;
    }

面包屑模板：

<div aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li *ngFor="let breadcrumb of breadcrumbs; let last = last" aria-current="page" class="breadcrumb-item active">
            <a *ngIf="!last" [routerLink]="breadcrumb.url" class="breadcrumb-text">{{ breadcrumb.label }}</a>
            <span *ngIf="last" class="breadcrumb-text">{{ breadcrumb.label }}</span>
        </li>
        <li *ngIf="breadCrumbsAdditionalText" class="breadcrumb-item active">
            <span class="breadcrumb-text">{{breadCrumbsAdditionalText}}</span>
        </li>
    </ol>
</div>

以及我使用它的路由：

    const route = [{ path: '', redirectTo:'testmodule/testcomponent1', pathMatch: 'full' },
{ path: 'testmodule',component: ContentWrapper,data: {pageTitle: 'test Module'},children = [{path: 'testcomponent1',component: TestComponent1,data:{pageTitle: 'Test Component 1'},
},{path: 'testcomponent2',component: TestComponent2,data:{pageTitle: 'Test Component 2'}}]

标签： angularangular7-router