角2。如何访问所有级别的 routeConfig 元素表单指令

Question

我想创建一个指令，它应该通过扩展 routerData

检查 routeConfig 元素上定义的 ACL

如何访问 routerConfig 中定义的 routerData？（必须有所有级别的菜单）

例子：

我的 ACL 指令

@Directive({
    selector: '[myAcl]'
})
export class MyAclDirective {

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

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

    ngAfterViewInit(){

        //Key name to find in 'routeConfig' acl definition of 'routerData'
        let componentAliasName = this.routeParams;

        //NEED TO GET ACCESS TO ROUTECONFIG DEFINITION
        //
        //Example: 
        //  @RouteConfig([
        //      { path:'/user/...',   name: 'UserLink', component: UserComponent, data: {res: 'user', priv: 'show'} } ])
        // AND GET BY 'name' == 'componentAliasName' my extend acl definition "data: {res: 'user', priv: 'show'}"

        console.log("CHECK ACL: " + data.res + " | " + data.priv);

        //ACL service 
        let hasAccess = AclService.checkAccess(data.res, data.priv);

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


    }
}

主组件

@RouteConfig([
    { path:'/home',       name: 'HomeLink', component: HomeComponent, useAsDefault: true },
    { path:'/user/...',   name: 'UserLink', component: UserComponent, data: {res: 'user', priv: 'show'} }
])

@Component({
    selector: 'main-app',
    template: `
        <ul>
            <li><a myAcl [routerLink]="['HomeLink']">Home</a></li>
            <li><a myAcl [routerLink]="['UserLink']">User</a>
                <ul>
                    <li><a myAcl [routerLink]="['ProfileLink']">Profile</a>
                        <ul>
                            <li><a myAcl [routerLink]="['SubProfileLink']">SubProfile</a>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <router-outlet></router-outlet>
    `,
    directives: [ MY_ACL_DIRECTIVES, ROUTER_DIRECTIVES ],
})
export class MainComponent {

}

用户组件

@RouteConfig([
    { path: '/profile/...', name: 'ProfileLink', component: ProfileComponent, data: {res: 'profile', priv: 'show'} }
])
@Component({
    selector: 'user-id',
    template: `<h1>User</h1>`,
    directives: [ROUTER_DIRECTIVES, MY_ACL_DIRECTIVES]
})
export class UserComponent {
}

配置文件组件

@RouteConfig([
    { path: '/subprofile', name: 'SubProfileLink', component: SubProfileComponent, data: {res: 'profile', priv: 'details'} }
])
@Component({
    selector: 'profile-id',
    template: `<h1>Profile</h1>`,
    directives: [ROUTER_DIRECTIVES, MY_ACL_DIRECTIVES]
})
export class ProfileComponent {
}

子配置文件组件

@Component({
    selector: 'subprofile-id',
    template: `<h1>Sub Profile</h1>`,
    directives: [ROUTER_DIRECTIVES, MY_ACL_DIRECTIVES]
})
export class SubProfileComponent {
}

Related link

Answer 1

您应该可以使用 CanActivate 装饰器。它看起来像这样：

@Component({...})
@CanActivate((next, prev) => (hasAccess))
export class UserComponent {
    // your component code
}

您可以在此处阅读更多内容：https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html