0

I want to create a directives which should be check ACL defined on the routeConfig element by extend routerData

How can I get access to the routerData defined in routerConfig? (must have all levels of menu)

Example:

My ACL direvtives

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


    }
}

MainComponent

@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 {

}

UserComponent

@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 {
}

ProfileComponent

@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 {
}

SubProfileComponent

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

Related link

Community
  • 1
  • 1
Power Web Design
  • 139
  • 1
  • 3
  • 14

1 Answers1

0

You should be able to use the CanActivate decorator. It would look something like this:

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

You can read more here: https://angular.io/docs/ts/latest/api/router/CanActivate-decorator.html

Brian Lewis
  • 5,739
  • 1
  • 21
  • 28
  • Yes I am now how use canAcivate but I don't want check access only for my component but must check the same rules like in component for menu link(for no renderer link in menu), button link and other link to secured components. And I want define my extended access rules for component and link in one place in **routerData** If you see my sample code into routerData I define resource and privileges for check access the same method in canActivate (see my next post) – Power Web Design Apr 02 '16 at 20:37