PanelBar exclude false canActivate

[Chris]

I'm using the PanelBar in my Angular 7 app. I have the app-routing.module.ts routing config populated with parent child routes.

On each route (parent and child) I'm using the canActivate guard.

 

If my guard returns a false - my PanelBar still shows the path. Although if I try and navigate to the path - Angular routing blocks it like it should.

 

<kendo-panelbar [selectable]="true">

   <kendo-panelbar-item
   *ngFor="let route of router.config"
   [id]="route.path"
   [title]="route.path ? route.path : 'home'"
   [selected]="'/' + route.path == selectedId"
   [routerLink] = "route.children?null:route.path"
   [expanded]="'/' + route.path == selectedParent">

        <kendo-panelbar-item
       *ngFor="let child of route.children"
       [title]="route.path + '/' + child.path"
       [id]="route.path + '/' + child.path"
       [selected]="'/' + route.path + '/' + child.path == selectedId"
       [routerLink] = "route.path + '/' + child.path">
      </kendo-panelbar-item>

   </kendo-panelbar-item>

</kendo-panelbar>

 

How do I hide the false guard paths in the PanelBar?

Thanks

 

[Chris]

I also need this same for children. If a child defined in the router config canActivateChild returns a false I don't want to include it in the panelbar.

[Dimitar]

Hello Chris,

The route guards are in general used to not only return a boolean value indicating whether the access to a page should be allowed but often have side-effects like redirecting to a login page, 403/404 page, logging data about unauthorized access attempt, etc. That's why in general it's not a good idea to go for such approach where you rely on the guards to determine whether or not to show something. For that reason we don't provide such an option for the PanelBar.

My advice to you is to manually list your routes in the PanelBar and to use *ngIf on each one with a custom condition (*ngIf="isAdmin())". I don't think an example is required here, but feel free to ask for one if you deem it necessary.

A second option is to use the data field of the route like demonstrated in this example. In the .routes file, I've specified a data field for some of the routes, that is later used in the component where we render the PanelBar. It has it's drawbacks though, as you cannot inject the AuthService in the routes file and you have to use a static method for the check. 

Using the RouteGuard directly is of course also an option. I was curious to see if I can get it to work and you can see the result here. It's working fine, however, it is a bit like fighting the framework. As I said, the route guards are intended for routing interception - not to check if some element should be visible. If you go for such an approach, do so with caution. If you redirect the users to e.g. a login page in the canActivate method, the redirection will take place when rendering the PanelBar as well, which would probably be undesired.

In conclusion, I would advise you to go for the first approach - just list the routes by hand. A common practice is to write a few functional tests to ensure that the routes are correct - that way if someone changes the route definitions, the tests will be there to remind the developer that a change in the UI code is required as well.

Hope this helps. Let me know in case any additional information is needed for this case.

Regards,
Dimitar
Progress Telerik