{"id":14973317,"url":"https://github.com/daoudadiallo/ng2-acl","last_synced_at":"2025-10-26T23:30:35.241Z","repository":{"id":121537986,"uuid":"99446739","full_name":"daoudaDiallo/ng2-acl","owner":"daoudaDiallo","description":"Role based permissions for Angular v2++","archived":false,"fork":false,"pushed_at":"2018-12-13T11:19:33.000Z","size":30,"stargazers_count":15,"open_issues_count":3,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T00:51:09.764Z","etag":null,"topics":["acl","angular","angular-2","angular-4","angular2","angular4","javascript","permission","role"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daoudaDiallo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-05T20:40:54.000Z","updated_at":"2024-02-04T04:04:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"895b55af-5fe4-49cd-b32c-2481858f6e06","html_url":"https://github.com/daoudaDiallo/ng2-acl","commit_stats":{"total_commits":12,"total_committers":2,"mean_commits":6.0,"dds":0.5,"last_synced_commit":"56e4f7e4c23620f57ef4238ffddd710fb5bec108"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daoudaDiallo%2Fng2-acl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daoudaDiallo%2Fng2-acl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daoudaDiallo%2Fng2-acl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daoudaDiallo%2Fng2-acl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daoudaDiallo","download_url":"https://codeload.github.com/daoudaDiallo/ng2-acl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238408646,"owners_count":19467143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["acl","angular","angular-2","angular-4","angular2","angular4","javascript","permission","role"],"created_at":"2024-09-24T13:48:32.792Z","updated_at":"2025-10-26T23:30:34.864Z","avatar_url":"https://github.com/daoudaDiallo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ng2 ACL\n\n---\n\n## About\n\nNg2 ACL _(Access Control List)_ is a service that allows you to protect/show content based on the current user's assigned role(s), and those role(s) permissions (abilities).  So, if the current user has a \"moderator\" role, and a moderator can \"ban_users\", then the current user can \"ban_users\".\n\nCommon uses include:\n\n* Manipulate templates based on role/permissions\n* Prevent routes that should not be viewable to user\n\n### How secure is this?\n\nA great analogy to ACL's in JavaScript would be form validation in JavaScript.  Just like form validation, ACL's in the browser can be tampered with.  However, just like form validation, ACL's are really useful and provide a better experience for the user and the developer.  Just remember, **any sensitive data or actions should require a server (or similar) as the final authority**.\n\n##### Example Tampering Scenario\n\nThe current user has a role of \"guest\".  A guest is not able to \"create_users\".  However, this sneaky guest is clever enough to tamper with the system and give themselves that privilege. So, now that guest is at the \"Create Users\" page, and submits the form. The form data is sent to the server and the user is greeted with an \"Access Denied: Unauthorized\" message, because the server also checked to make sure that the user had the correct permissions.\n\nAny sensitive data or actions should integrate a server check like this example.\n\n---\n\n## Basic Example\n\n### Set Data\n\nSetup the `AclService` in your app component's.\n\n```ts\n//app.component.ts\n\nimport { AclService } from 'ng2-acl/dist';\n\n/*\n * App Component\n * Top Level Component\n */\n@Component({\n  selector: 'app'\n})\nexport class App {\n\n  aclData = {};\n\n  constructor(private aclService: AclService) {}\n\n  ngOnInit() {\n      // Set the ACL data. Normally, you'd fetch this from an API or something.\n      // The data should have the roles as the property names,\n      // with arrays listing their permissions as their value.\n      this.aclData = {\n          guest: ['login'],\n          member: ['logout', 'view_content'],\n          admin: ['logout', 'view_content', 'manage_content']\n      }\n      this.aclService.setAbilities(aclData);\n          \n      // Attach the member role to the current user\n      this.aclService.attachRole('member');\n  }\n\n}\n\n```\n\n### Protect a route\n\nIf the current user tries to go to the `/manage` route, they will be redirected because the current user is a `member`, and `manage_content` is not one of a member role's abilities.\n\nHowever, when the user goes to `/content`, route will work as normal, since the user has permission.  If the user was not a `member`, but a `guest`, then they would not be able to see the `content` route either, based on the data we set above.\n\n```ts\n//demo/demo.routing.ts\nimport { Routes } from '@angular/router';\nimport { DemoComponent } from './demo.component';\nimport { AclDemoResolver } from './demo.resolve';\n\n// noinspection TypeScriptValidateTypes\nconst routes: Routes = [\n  {\n    path: '',\n    component: DemoComponent,\n    resolve: { route: AclDemoResolver, state: AclDemoResolver },\n  },\n];\n\n//demo/demo.resolve.ts\nimport { Injectable } from '@angular/core';\nimport { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';\nimport { Observable } from 'rxjs/Rx';\nimport { AclService } from 'ng2-acl';\nimport { AclRedirection } from './app.redirection';\n\n@Injectable()\nexport class AclDemoResolver implements Resolve\u003cany\u003e {\n  constructor(\n    private aclService: AclService, private router: Router, private aclRedirection: AclRedirection,\n  ) { }\n\n  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable\u003cany\u003e {\n    if (this.aclService.can('manage_content')) {\n      // Has proper permissions\n      return Observable.of(true);\n    } else {\n      // Does not have permission\n      this.aclRedirection.redirectTo('Unauthorized');\n    }\n  }\n}\n\n//app.redirection.ts\n//aclRedirection Service\nimport { Injectable } from '@angular/core';\nimport { Router } from '@angular/router';\n\n@Injectable()\nexport class AclRedirection {\n  constructor(\n       private router: Router,\n  ) {}\n\n  redirectTo(type: string) {\n    if (type === 'Unauthorized') {\n      this.router.navigate(['/']);\n    }\n  }\n  \n}\n\n//app.module.ts\nimport { AclService } from 'ng2-acl';\nimport { AclDemoResolver } from './demo/demo.resolve';\nimport { App } from './app.component';\nimport { AclRedirection } from './app.redirection';\n......\n@NgModule({\n  bootstrap: [App],\n  declarations: [\n    App,\n  ],\n  ......\n  imports: [\n  ......\n  ],\n  providers: [\n    AclService,\n    AclRedirection,\n    AclDemoResolver,\n  ],\n  .....\n})\n\nexport class AppModule {\n}\n\n\n```\n\n### Manipulate a Template\n\nThe edit link in the template below will not show, because the current user is a `member`, and `manage_content` is not one of a member role's abilities.\n\n###### Component\n\n```ts\nimport { AclService } from 'ng2-acl/dist';\n\n/*\n * Demo Component\n */\n@Component({\n  selector: 'demo',\n  templateUrl: 'demo.html'\n})\nexport class Demo {\n\n  can = '';\n\n  constructor(private aclService: AclService) {}\n\n  ngOnInit() {\n      this.can = this.aclService.can;\n  }\n\n}\n\n```\n\n###### Template\n\n```html\n\u003c!--demo.html--\u003e\n\u003ca *ngIf=\"can('manage_content')\"\u003eEdit\u003c/a\u003e\n```\n\n---\n\n## Install\n\nInstall with `npm`:\n\n```shell\nnpm install ng2-acl\n```\n\n---\n\n## Documentation\n\n#### Config Options\n\n| Property | Default | Description |\n| -------- | ------- | ----------- |\n| `storage` | `\"sessionStorage\"` | `\"sessionStorage\"`, `\"localStorage\"`, `false`. Where you want to persist your ACL data. If you would prefer not to use web storage, then you can pass a value of `false`, and data will be reset on next page refresh _(next time the Angular app has to bootstrap)_ |\n| `storageKey` | `\"AclService\"` | The key that will be used when storing data in web storage |\n\n### Public Methods\n\n#### `this.aclService.resume()`\n\nRestore data from web storage.\n\n###### Returns\n\n**boolean** - true if web storage existed, false if it didn't\n\n###### Example Usage\n\n```ts\nimport { AclService } from 'ng2-acl/dist';\n\n/*\n * Demo Component\n */\n@Component({\n  selector: 'demo',\n  templateUrl: 'demo.html'\n})\nexport class Demo {\n\n  can = '';\n\n  constructor(private aclService: AclService) {}\n\n  ngOnInit() {\n      if (!this.aclService.resume()) {\n          // Web storage record did not exist, we'll have to build it from scratch\n          \n          // Get the user role, and add it to AclService\n          var userRole = fetchUserRoleFromSomewhere();\n          this.aclService.addRole(userRole);\n          \n          // Get ACL data, and add it to AclService\n          var aclData = fetchAclFromSomewhere();\n          this.aclService.setAbilities(aclData);\n       }\n  }\n\n}\n\n\n#### `this.aclService.flushStorage()`\n\nRemove all data from web storage.\n\n#### `this.aclService.attachRole(role)`\n\nAttach a role to the current user. A user can have multiple roles.\n\n###### Parameters\n\n| Param | Type | Example | Details |\n| ----- | ---- | ------- | ------- |\n| `role` | string | `\"admin\"` | The role label |\n\n#### `this.aclService.detachRole(role)`\n\nRemove a role from the current user\n\n###### Parameters\n\n| Param | Type | Example | Details |\n| ----- | ---- | ------- | ------- |\n| `role` | string | `\"admin\"` | The role label |\n\n#### `AclService.flushRoles()`\n\nRemove all roles from current user\n\n#### `this.aclService.getRoles()`\n\nGet all of the roles attached to the user\n\n###### Returns\n\n**array**\n\n#### `this.aclService.hasRole(role)`\n\nCheck if the current user has role(s) attached. If an array is given, all roles must be attached. To check if any roles in an array are attached see the `hasAnyRole()` method.\n\n###### Parameters\n\n| Param | Type | Example | Details |\n| ----- | ---- | ------- | ------- |\n| `role` | string/array | `\"admin\"` | The role label, or an array of role labels |\n\n###### Returns\n\n**boolean**\n\n#### `this.aclService.hasAnyRole(roles)`\n\nCheck if the current user has any of the given roles attached. To check if all roles in an array are attached see the `hasRole()` method.\n\n###### Parameters\n\n| Param | Type | Example | Details |\n| ----- | ---- | ------- | ------- |\n| `roles` | array | `[\"admin\",\"user\"]` | Array of role labels |\n\n###### Returns\n\n**boolean**\n\n#### `this.aclService.setAbilities(abilities)`\n\nSet the abilities object (overwriting previous abilities).\n\n###### Parameters\n\n| Param | Type | Details |\n| ----- | ---- | ------- |\n| `abilities` | object | Each property on the abilities object should be a role. Each role should have a value of an array. The array should contain a list of all of the role's abilities. |\n\n###### Example\n\n```ts\nthis.abilities = {\n  guest: ['login'],\n  user: ['logout', 'view_content'],\n  admin: ['logout', 'view_content', 'manage_content']\n}\nthis.aclService.setAbilities(abilities);\n```\n\n#### `this.aclService.addAbility(role, ability)`\n\nAdd an ability to a role\n\n###### Parameters\n\n| Param | Type | Example | Details |\n| ----- | ---- | ------- | ------- |\n| `role` | string | `\"admin\"` | The role label |\n| `ability` | string | `\"create_users\"` | The ability/permission label |\n\n#### `this.aclService.can(ability)`\n\nDoes current user have permission to do the given ability?\n\n###### Returns\n\n**boolean**\n\n###### Example\n\n```ts\n// Setup some abilities\nthis.aclService.addAbility('moderator', 'ban_users');\nthis.aclService.addAbility('admin', 'create_users');\n\n// Add moderator role to the current user\nthis.aclService.attachRole('moderator');\n\n// Check if the current user has these permissions\nthis.aclService.can('ban_users'); // returns true\nthis.aclService.can('create_users'); // returns false\n```\n\n\n---\n\n## License\n\nThe MIT License\n\nNg2 ACL\nCopyright (c) 2017 Daouda Diallo\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaoudadiallo%2Fng2-acl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaoudadiallo%2Fng2-acl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaoudadiallo%2Fng2-acl/lists"}