Question

我为面包屑编写了代码，并且可以正常工作，但是遇到权限问题。示例：一个模块名称：TestModulewhich是延迟加载的，并且有很多组件，例如TestComponent1, TestComponent2,...等。如果我单击TestCOmponent1，面包屑将类似于测试模块/测试组件1，并且对于TestComponent2同样。如果单击面包屑中的“测试”模块，则应将其重定向到工作正常的“测试组件1”，但是如果我没有“测试组件1”的许可，则禁止抛出403。如果我没有测试组件1的权限，我需要将其重定向到TestComponent 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'}}]

具有权限的面包屑导航

0 个答案: