Convert Figma logo to code with AI

RafaelVidaurre logoangular-permission

Simple route authorization via roles/permissions

1,127
212
1,127
12

Top Related Projects

Simple route authorization via roles/permissions

5,871

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

4,064

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

  1. 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();
    });
  }
}
  1. Using permissions in routes:
const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    data: {
      permissions: {
        only: ['ADMIN']
      }
    }
  }
];
  1. 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

  1. Install the package:

    npm install angular-permission --save
    
  2. Import the module in your app.module.ts:

    import { PermissionModule } from 'angular-permission';
    
    @NgModule({
      imports: [
        // ... other imports
        PermissionModule.forRoot()
      ]
    })
    export class AppModule { }
    
  3. Define permissions in your app module or a dedicated permissions service:

    constructor(private permissionStore: PermissionStore) {
      permissionStore.definePermission('USER', (stateParams) => {
        return userIsLoggedIn();
      });
    }
    
  4. 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.

5,871

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.

4,064

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

angular-permission-banner

Permission

Fully featured role and permission based access control for your angular applications

Bower npm jspm Travis Coveralls

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

NPM DownloadsLast 30 Days