For a complete access control for your application, you will probably need two things:
DOM control to show or hide parts of your view based on the user Roles/Permissions.
Protect your routes by preventing a visitor from accessing administrator pages.
Control routes loading based on roles and pernissions; this is what Angular CanMatch provides to load a route or not based on a condition.
angular-rbac provides all the above features through:
CanAccessDirective Directive for DOM control
<div
*canAccess="{ roles: ['admin'], permissions: ['user-delete'] }; other: noPermissionTemplate">
<div>Protected users list here</div>
</div>
<ng-template #noPermissionTemplate>
<p>You do not have permission!</p>
</ng-template>
Three prebuilt RBAC guards
angular-rbac guards take the allowed roles and permissions to access a specific route, the redirectUrl in case of failure and boolean for skipLocationChange
canActivateAccessGuard for routes activation CanActivate
canActivateChildAccessGuard for children activation CanActivateChild
canMatchAccessGuard for route loading based on condition CanMatch
{
path: "planet",
component: LayoutComponent,
loadChildren: () => import("./features/planet/planet.routes").then((routes) => routes.PLANET_ROUTES),
canActivateChild: [canActivateChildAccessGuard({ roles: ["admin"], permissions: ["read-planets", "create-planets"] }, "/auth/login", true)],
}
Check it out
Github: https://github.com/fatehMohamed14/angular-rbac
NPM: https://www.npmjs.com/package/@fatehmoh/angular-rbac