Top Related Projects
Simple route authorization via roles/permissions
CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access
An authorization library that supports access control models like ACL, RBAC, ABAC in Node.js and Browser
Role and Attribute based Access Control for Node.js
NestJs CRUD for RESTful APIs
Quick Overview
Angular-permission is a lightweight, flexible, and powerful authorization library for Angular applications. It provides a declarative way to handle permissions and roles in Angular templates and routes, allowing developers to easily implement complex authorization logic in their applications.
Pros
- Easy integration with Angular applications
- Supports both route-based and template-based permission checks
- Flexible permission definition system
- Lightweight and performant
Cons
- Limited documentation and examples for complex scenarios
- May require additional setup for integration with backend authentication systems
- Not actively maintained (last update was in 2019)
Code Examples
- Defining permissions:
// In your app module or a dedicated permissions module
import { NgModule } from '@angular/core';
import { PermissionModule } from 'angular-permission';
import { PermissionStore } from 'angular-permission';
@NgModule({
imports: [PermissionModule.forRoot()]
})
export class AppModule {
constructor(private permissionStore: PermissionStore) {
permissionStore.definePermission('ADMIN', (stateParams) => {
// Your permission logic here
return userIsAdmin();
});
}
}
- Using permissions in routes:
const routes: Routes = [
{
path: 'admin',
component: AdminComponent,
data: {
permissions: {
only: ['ADMIN']
}
}
}
];
- Using permissions in templates:
<div *permissionOnly="['ADMIN', 'MANAGER']">
This content is only visible to admins and managers.
</div>
<div *permissionExcept="'GUEST'">
This content is hidden from guests.
</div>
Getting Started
-
Install the package:
npm install angular-permission --save
-
Import the module in your app.module.ts:
import { PermissionModule } from 'angular-permission'; @NgModule({ imports: [ // ... other imports PermissionModule.forRoot() ] }) export class AppModule { }
-
Define permissions in your app module or a dedicated permissions service:
constructor(private permissionStore: PermissionStore) { permissionStore.definePermission('USER', (stateParams) => { return userIsLoggedIn(); }); }
-
Use permissions in your routes and templates as shown in the code examples above.
Competitor Comparisons
Simple route authorization via roles/permissions
Pros of angular-permission
- More comprehensive documentation and examples
- Active community support and regular updates
- Better integration with Angular's routing system
Cons of angular-permission
- Slightly more complex setup process
- Potentially higher learning curve for beginners
- May have more overhead for simple permission scenarios
Code Comparison
angular-permission:
$stateProvider.state('admin', {
url: '/admin',
data: {
permissions: {
only: ['ADMIN']
}
}
});
angular-permission>:
$stateProvider.state('admin', {
url: '/admin',
permissions: ['ADMIN']
});
The code comparison shows that angular-permission uses a more structured approach to defining permissions within state configurations, while angular-permission> opts for a simpler, more concise syntax. This reflects the overall design philosophy of each library, with angular-permission providing more granular control at the cost of added complexity, and angular-permission> focusing on simplicity and ease of use.
Both libraries aim to solve the same problem of managing permissions in Angular applications, but they differ in their implementation details and level of abstraction. Developers should choose based on their project requirements, team expertise, and desired balance between flexibility and simplicity.
CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access
Pros of CASL
- Framework-agnostic, can be used with various JavaScript frameworks
- More flexible and powerful permission system with ability to define complex rules
- Active development and maintenance with frequent updates
Cons of CASL
- Steeper learning curve due to its more complex API
- May be overkill for simple permission scenarios
- Requires more setup and configuration compared to angular-permission
Code Comparison
CASL:
import { AbilityBuilder, Ability } from '@casl/ability';
const { can, cannot, build } = new AbilityBuilder(Ability);
can('read', 'Post');
cannot('delete', 'Post', { published: true });
const ability = build();
angular-permission:
angular.module('myApp', ['permission'])
.run(function (Permission) {
Permission
.defineRole('admin', function () {
return true;
});
});
Summary
CASL offers a more powerful and flexible permission system that can be used across different JavaScript frameworks, while angular-permission is specifically designed for Angular applications. CASL provides more advanced features but may require more setup and have a steeper learning curve. angular-permission is simpler to use for basic scenarios in Angular projects but may lack some of the advanced capabilities of CASL.
An authorization library that supports access control models like ACL, RBAC, ABAC in Node.js and Browser
Pros of node-casbin
- More flexible and powerful, supporting various access control models (ACL, RBAC, ABAC)
- Language-agnostic, can be used with multiple programming languages and frameworks
- Provides a policy management API for dynamic policy updates
Cons of node-casbin
- Steeper learning curve due to its more complex configuration and setup
- May be overkill for simpler Angular-specific permission requirements
- Requires additional integration work to fit seamlessly into an Angular application
Code Comparison
node-casbin:
const enforcer = await newEnforcer('model.conf', 'policy.csv');
const allowed = await enforcer.enforce('alice', 'data1', 'read');
angular-permission:
@NgModule({
imports: [PermissionModule.forRoot()]
})
export class AppModule {}
Summary
node-casbin offers a more comprehensive and flexible authorization solution that can be used across different platforms and languages. It supports various access control models and provides dynamic policy management. However, it may require more setup and integration effort for Angular-specific use cases.
angular-permission, on the other hand, is tailored specifically for Angular applications, making it easier to implement and use within the Angular ecosystem. It provides a simpler API and integrates more seamlessly with Angular's dependency injection system. However, it may lack some of the advanced features and flexibility offered by node-casbin.
The choice between the two depends on the specific requirements of the project, the desired level of flexibility, and the complexity of the authorization rules needed.
Role and Attribute based Access Control for Node.js
Pros of accesscontrol
- Framework-agnostic, can be used with any JavaScript project
- Supports hierarchical role inheritance
- Provides granular control over resources and actions
Cons of accesscontrol
- Requires more setup and configuration
- Less integration with Angular-specific features
- May have a steeper learning curve for Angular developers
Code Comparison
angular-permission:
$stateProvider.state('admin', {
data: {
permissions: {
only: ['ADMIN']
}
}
});
accesscontrol:
const ac = new AccessControl();
ac.grant('user').createOwn('article');
ac.grant('admin').extend('user').updateAny('article');
if (ac.can('admin').updateAny('article').granted) {
// Admin can update any article
}
angular-permission focuses on declarative permission definitions within Angular's routing system, making it easy to restrict access to specific routes based on user roles. accesscontrol, on the other hand, provides a more flexible and granular approach to defining permissions, allowing for complex role hierarchies and fine-grained control over resources and actions.
While angular-permission is tailored for Angular applications, accesscontrol can be used in any JavaScript environment, making it more versatile for projects that may involve multiple frameworks or non-Angular components.
NestJs CRUD for RESTful APIs
Pros of crud
- Provides a comprehensive set of CRUD operations for NestJS applications
- Offers automatic API endpoint generation, reducing boilerplate code
- Supports advanced querying, filtering, and pagination out of the box
Cons of crud
- More complex setup and configuration compared to angular-permission
- May introduce unnecessary overhead for simpler applications
- Tightly coupled with NestJS, limiting its use in other frameworks
Code Comparison
angular-permission:
Permission.defineRole('ADMIN', function(stateParams) {
return this.User.hasRole('ADMIN');
});
crud:
@Crud({
model: { type: User },
query: {
join: { profile: {} },
filter: { isActive: true },
},
})
@Controller('users')
export class UsersController {
constructor(public service: UsersService) {}
}
Summary
While angular-permission focuses on role-based access control for Angular applications, crud is a more comprehensive solution for building CRUD APIs in NestJS. crud offers automatic endpoint generation and advanced querying capabilities, but comes with a steeper learning curve and is specific to NestJS. angular-permission, on the other hand, provides a simpler approach to managing permissions in Angular apps but lacks the extensive API-building features of crud.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Permission
Fully featured role and permission based access control for your angular applications
Permission helps you gain control of your routes, by using simple concepts for you to decide who can access them. We've seen plenty of big fat tutorials on access control implementation, and they can be quite overwhelming or inconsistent. So we bring you a elastic, powerful and yet straightforward solution, that allow you provide fine-grained role and permission based access control for your application users.
Documentation and examples
Want to know more? See the wiki.
Authors
- Rafael Vidaurre - full-stack developer and musician who loves creating things of value
- Blazej Krysiak - fast-minded, creative web developer seeking knowledge in innovative web technologies and cloud-based solutions
Top Related Projects
Simple route authorization via roles/permissions
CASL is an isomorphic authorization JavaScript library which restricts what resources a given user is allowed to access
An authorization library that supports access control models like ACL, RBAC, ABAC in Node.js and Browser
Role and Attribute based Access Control for Node.js
NestJs CRUD for RESTful APIs
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot