angular-rbac the RBAC lightweight library for your next Angular projects

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