Angular 4 - CanActivate check component being route

Question

In CanActivate is there a way to check which component is being route/requested by the user for authentication purpose. So instead of checking the url as i am doing below, i would like to do something like if(route.component instanceof MyComponent).

I am implementing role based access with ability to config each role to have different access level (view,edit etc..) for different component. So the easiest thing I thought would be to get current component being route and then check access level for that component rather than creating different AuthGard for each component.

i am trying to do this by check url but its casing problem when there is parameter included in url.

 canActivate(route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot) {       
            let ac = this.auth.getAccessConfig();
            switch (state.url) {
                case '/site':
                    return ac.some(x => x.moduleID == AccessModulesEnum.Site && x.permissionID == AccessPermissionEnum.View);
                case '/site/new':
                    return ac.some(x => x.moduleID == AccessModulesEnum.Site && x.permissionID == AccessPermissionEnum.Modify);
                case '/site/:id': ***//this doesn't work as :id could be anything***
                    return ac.some(x => x.moduleID == AccessModulesEnum.SiteDetail && x.permissionID == AccessPermissionEnum.View);
                case '/reports/milestone':
                    return ac.some(x => x.moduleID == AccessModulesEnum.MilestoneReport && x.permissionID == AccessPermissionEnum.View);
                case '/reports/audit':
                    return ac.some(x => x.moduleID == AccessModulesEnum.AuditReport && x.permissionID == AccessPermissionEnum.View);
                case '/reports/schedule':
                    return ac.some(x => x.moduleID == AccessModulesEnum.ReportScheduler && x.permissionID == AccessPermissionEnum.View);
                case '/importer':
                    return ac.some(x => x.moduleID == AccessModulesEnum.Import && x.permissionID == AccessPermissionEnum.View);
                case '/reports':
                    return ac.some(x => x.moduleID == AccessModulesEnum.SiteReport && x.permissionID == AccessPermissionEnum.View);
                case '/admin/users':
                    return ac.some(x => x.moduleID == AccessModulesEnum.User && x.permissionID == AccessPermissionEnum.View);
                case '/admin/tables':
                    return ac.some(x => x.moduleID == AccessModulesEnum.ReferenceTable && x.permissionID == AccessPermissionEnum.View);
                default:
                    return false;
            }
        });
    }

Another question: is it possible to call AuthGard with parameter from Routes configuration like { path: 'site/:id', component:SiteDetail,canActivate:[(callCustomeAuthGard('SiteDetailComponent')]

Thanks

score 0 · Answer 1 · answered Dec 20 '17 at 00:58

0

have found solution for the above problem using route.routeConfig.path to check for route path instead of url which will be like 'site/:id' instead of 'site/2'.

But would like to if there is any better way of doing role base authentication as above.

answered Dec 20 '17 at 00:58

Bhavesh

819
1
17
31

meriton · Answer 2 · 2017-12-20T01:51:38.367

0

Have you tried route.component? According to the docs, this should contain the component class being routed to.

If so, the activation guard could ask the component class which permissions it requires.

edited Dec 20 '17 at 01:51

answered Dec 20 '17 at 01:27

meriton

68,356
14
108
175

1

yes, i did but don't now how do i check/compare it what component is it. (route.component instanceof MyComponent) does work. – Bhavesh Dec 20 '17 at 05:50
1

Try `route.component == MyComponent` – meriton Dec 20 '17 at 07:48

score 0 · Answer 3 · answered Apr 30 '19 at 08:05

0

Your ActivatedRouteSnapshot (the route parameter you use in the canActivate function) contains the component.

So you can just use:

if (route.component === MyComponent) {
  // Do something
}

answered Apr 30 '19 at 08:05

Napinator

500
2
12

Angular 4 - CanActivate check component being route

3 Answers3