Angular2. Wie zum ausblenden(nicht darstellen) den link in das Menü nach dem check Zugang?

Verstecken muss link im Menü auf der Grundlage der "routerLink" nach dem check ACL-Zugriff. Ich will nicht zu verwenden, Winkel-Richtlinien "*ngIf" auf jedes element link in der app (Notwendigkeit zu tun, dass globaly auf die routerConfig-definition)

Inhalt kann kontrollieren mit annotation @CanActivate auf Komponenten, aber verstecken muss link im Menü

Ich versuche dies mit überschreiben "routerLink" Richtlinie, aber in diesen Richtlinien nach überschreiben bekomme keinen Zugriff auf meine erstreckt param definiert(Ressourcen und privilages) in der routerConfig

Beispiel:

@Component({})
@RouteConfig([{   
    path: '/dashboard', 
    name: 'Dashboard', 
    component: DashboardComponent, 
    data: {'resource':'account', 'privilage':'show'} 
}])

Aber ich bekomme keinen Zugriff auf diese config-Daten(routerData) in der "routerLink".

Einige Idee, wie Sie das tun können?

Zweite version

Multi-level-Menü und trotzdem habe problem mit Zugriff auf die (Daten erweitern config) aus routerConfig definition.

Hauptbestandteil

@RouteConfig([
    { path:'/dashboard',   name: 'DashboardLink',   component: DashboardComponent,  data: { res: 'dasboard', priv: 'show'}, useAsDefault: true },
    { path:'/user/...',    name: 'UserLink',        component: UserComponent,       data: { res: 'user', priv: 'show'} },
 ])

@Component({
    selector: 'main-app',
    template: `
            <ul class="left-menu">
                <li><a secured [routerLink]="['UserLink']">User</a>
                    <ul>
                        <li><a secured [routerLink]="['ProfileLink']">Profile</a></li>
                    </ul>
                </li>
                <li><a secured [routerLink]="['HomeLink']">Home</a></li>
                <li><a secured [routerLink]="['DashboardLink']">Dashboard</a></li>
            </ul>

            <router-outlet></router-outlet>
    `
})
export class MainComponent {

}

Benutzer-Komponente

@RouteConfig([
    { path: '/profile', name: 'ProfileLink', component: ProfileComponent, data: {res: 'user', priv: 'details'} },
])
@Component({ ... })
export class UserComponent {
}

Profil Komponente

@Component({ ... })
export class ProfileComponent {

}

Meine sichere Richtlinien

@Directive({
    selector: '[secured]'
})
export class SecuredDirective {

    @Input('routerLink')
    routeParams: any[];

    /**
     * 
     */
    constructor(private _viewContainer: ViewContainerRef, private _elementRef: ElementRef, private router:Router) {
    }

    ngAfterViewInit(){
        //Get access to the directives element router instructions (with parent instructions)
        let instruction = this.router.generate(this.routeParams);
            //Find last child element od instruction - I thing thats my component but I am not sure (work good with two levels of menu)
            this.getRouterChild(instruction);
    }

    private getRouterChild(obj: any){
        var obj1 = obj;
        while(true) {
            if( typeof obj1.child !== 'undefined' && obj1.child !== null ){
                obj1 = obj1.child;
            } else {
                break;
            }  
        }
        this.checkResPrivAcl(obj1.component.routeData.data)
    }
    private checkResPrivAcl(aclResAndPriv: any){

        let hasAccess = CommonAclService.getInstance().hasAccess(aclResAndPriv['res'], aclResAndPriv['priv']);

        if (!hasAccess) {
            let el : HTMLElement = this._elementRef.nativeElement;
            el.parentNode.removeChild(el);   
        }

        console.log("CHECK ACL: " + aclResAndPriv['res'] + " | " + aclResAndPriv['priv']);
    }
}

Diese Lösung funktioniert nur für ein Kind-Element des Menüs funktionieren nicht mit der Hauptebene des Menüs, und sich nicht sicher ist, diese Arbeit korrekt auf die multi-level-Menü.

Ich versuche verschiedene Wege um dieses problem zu beheben, versuche ich Zugriff auf die RouterConfig-definition (und meine routerData erweitern config) in den Richtlinien und check-element durch die alias-Namen der Verknüpfung mit @Input('routerLink') aber nicht finden, wie bekomme ich Zugriff auf die RouterConfig.

InformationsquelleAutor Power Web Design | 2016-03-16