← ClaudeAtlas

delon-acllisted

@delon/acl skill - Access Control List for role-based permissions and UI element visibility. For ng-events construction site progress tracking system.
aiskillstore/marketplace · ★ 329 · AI & Automation · score 79
Install: claude install-skill aiskillstore/marketplace
# @delon/acl - Access Control List Trigger patterns: "ACL", "permission", "role", "access control", "@delon/acl", "can", "ability" ## Overview @delon/acl provides a role-based access control (RBAC) system for ng-alain applications, controlling UI element visibility and feature access based on user roles and permissions. **Package**: @delon/acl@20.1.0 **Integrated with**: @delon/auth for authentication ## Core Concepts ### 1. ACLService - Permission Management ```typescript import { inject } from '@angular/core'; import { ACLService } from '@delon/acl'; @Component({ selector: 'app-dashboard', standalone: true }) export class DashboardComponent { private aclService = inject(ACLService); ngOnInit(): void { // Set user roles and permissions this.aclService.setRole(['admin', 'user']); this.aclService.setAbility(['task:create', 'task:edit', 'task:delete']); // Set full ACL configuration this.aclService.set({ role: ['admin'], ability: ['task:create', 'task:edit'], mode: 'oneOf' // 'allOf' or 'oneOf' }); } canEditTask(): boolean { return this.aclService.can('task:edit'); } isAdmin(): boolean { return this.aclService.can({ role: ['admin'] }); } } ``` ### 2. ACL Directives - Conditional UI #### *aclIf Directive ```typescript import { ACLIfDirective } from '@delon/acl'; @Component({ imports: [ACLIfDirective], template: ` <!-- Show only if user has admin role --> <button *aclIf="'a