Browsing directly to a child route caused a redirect to 403

[vtt-lair]

We are experiencing a problem where if we try to browse directly to a child route we get redirected to our 403 page, however if we access the child via the parent page it works as expected.

Our route is setup as follows: path: 'guest/singleview/:id', component: CustomerSingleViewComponent, data: {title: 'Blah blah', notes:{type:'customer'}}, children: [ {path: 'details', component: CustomerProfileComponent, data: {Permission: { Only: ['CUSTSVVW'], RedirectTo: '403'}}, canActivate: [PermissionGuard]}, .... (more children) ]

If we hit the "/guest/singleview/:id/" then click on the tab that opens the "details" child, it shows the child with no issue. If we hit it with "/guest/singleview/:id/details", we get redirected to the 403, even though the user has permissions to see the child.

I've experimented and added another route that goes to "/guest/singleview/:id/details" just too see if that might sort out the issue, however it doesn't.

Any thoughts on this?

[vtt-lair]

Further investigation seems to point to the permissionService not being defined with the array of permissions a yet. So when it hits the route, it doesn't have the list of permissions in the store and thus fails.

[JavadRasouli]

You need to set permissions with permissionService before application startup. For more information see this link

[jarodsmk]

@JavidRasouli - Can permissions not somehow be set asynchronously? What if the permissions are retrieved from an API for instance?

[jarodsmk]

As a resolution - you can call the canActivate of the PermissionGuard in the canActivate of another guard, to delegate authentication & authorization respectively.