delon-auth-authentication-authorization

name	@delon/auth Authentication & Authorization
description	Implement authentication and authorization using @delon/auth. Use this skill when adding login/logout flows, JWT token management, role-based access control (RBAC), route guards, HTTP interceptors, and session management. Integrates with Firebase Auth and custom permission systems. Ensures secure token storage, automatic token refresh, and consistent authorization checks across components and services.
license	MIT

@delon/auth Authentication & Authorization Skill

This skill helps implement authentication and authorization using @delon/auth library.

Core Principles

Token Management

• JWT Storage: Secure token storage using DA_SERVICE_TOKEN
• Auto Refresh: Automatic token renewal before expiration
• Interceptors: Automatic token injection in HTTP requests
• Logout: Clean token removal and session cleanup

Authorization

• RBAC: Role-based access control
• Permissions: Fine-grained permission checking
• Guards: Route protection with role/permission checks
• ACL Integration: Works with @delon/acl for UI-level controls

Configuration

App Config

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideDelonAuth, DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
import { JWTTokenModel } from '@delon/auth';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDelonAuth({
      token_send_key: 'Authorization',
      token_send_template: 'Bearer ${token}',
      token_send_place: 'header',
      login_url: '/passport/login',
      ignores: [/\/login/, /assets\//],
      allow_anonymous_key: 'allow_anonymous',
      executeOtherInterceptors: true,
      refreshTime: 3000, // Refresh token check interval (ms)
      refreshOffset: 6000 // Refresh token before expiration (ms)
    })
  ]
};

Token Model

// src/app/core/models/auth-token.model.ts
import { JWTTokenModel } from '@delon/auth';

export interface AuthTokenModel extends JWTTokenModel {
  token: string;
  uid: string;
  email: string;
  displayName: string;
  role: string;
  permissions: string[];
  exp: number;
}

Authentication Service

// src/app/core/services/auth.service.ts
import { Injectable, inject } from '@angular/core';
import { Router } from '@angular/router';
import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
import { Auth, signInWithEmailAndPassword, signOut, User } from '@angular/fire/auth';
import { AuthTokenModel } from '@core/models/auth-token.model';
import { signal, computed } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private auth = inject(Auth);
  private tokenService = inject<ITokenService>(DA_SERVICE_TOKEN);
  private router = inject(Router);
  
  // State
  private currentUser = signal<User | null>(null);
  private authToken = signal<AuthTokenModel | null>();
  
  
  isAuthenticated = ( ..()?. != );
  userRole = ( .()?.);
  userPermissions = ( .()?. || []);
  
  () {
    
    ..( (user) => {
      ..(user);
       (user) {
         .();
      }  {
        .();
      }
    });
  }
  
  
   (: , : ): <> {
     {
       credential =  (., email, password);
       token =  credential..();
       tokenData =  .(token);
      
      
      ..(tokenData);
      ..(tokenData);
      
      
       ..();
    }  (error) {
      .(, error);
       error;
    }
  }
  
  
   (): <> {
     {
       (.);
      .();
       ..();
    }  (error) {
      .(, error);
       error;
    }
  }
  
  
   (): <> {
     user = .();
     (!user) ;
    
     {
       token =  user.(); 
       tokenData =  .(token);
      
      ..(tokenData);
      ..(tokenData);
    }  (error) {
      .(, error);
       .();
    }
  }
  
  
  (: ):  {
     .() === role;
  }
  
  
  (: ):  {
     .().(permission);
  }
  
  
  (: []):  {
     userPerms = .();
     permissions.( userPerms.(p));
  }
  
  
  (: []):  {
     userPerms = .();
     permissions.( userPerms.(p));
  }
  
  
    (: ): <> {
    
     payload = .((token.()[]));
    
    
     permissions =  .(payload.);
    
     {
      token,
      : payload.,
      : payload.,
      : payload. || payload.,
      : payload. || ,
      permissions,
      : payload.
    };
  }
  
  
    (: ): <[]> {
    
    
     [, ];
  }
  
  
   ():  {
    ..();
    ..();
    ..();
  }
}

Auth Guard

// src/app/core/guards/auth.guard.ts
import { inject } from '@angular/core';
import { Router, CanActivateFn } from '@angular/router';
import { AuthService } from '@core/services/auth.service';

/**
 * Guard to protect routes requiring authentication
 */
export const authGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  const router = inject(Router);
  
  if (authService.isAuthenticated()) {
    return true;
  }
  
  return router.createUrlTree(['/passport/login']);
};

Role Guard

// src/app/core/guards/role.guard.ts
import { inject } from '@angular/core';
import { Router, CanActivateFn, ActivatedRouteSnapshot } from '@angular/router';
import { AuthService } from '@core/services/auth.service';

/**
 * Guard to protect routes by role
 */
export const roleGuard: CanActivateFn = (route: ActivatedRouteSnapshot) => {
  const authService = inject(AuthService);
  const router = inject(Router);
  
  const requiredRole = route.data['role'] as string;
  
  if (!requiredRole) {
    console.warn('Role guard used without required role');
    return true;
  }
  
  if (authService.hasRole(requiredRole)) {
    return true;
  }
  
  // Redirect to unauthorized page
  return router.createUrlTree(['/exception/403']);
};

/**
 * Usage in routes:
 * {
 *   path: 'admin',
 *   component: AdminComponent,
 *   canActivate: [authGuard, roleGuard],
 *   data: { role: 'admin' }
 * }
 */

Permission Guard

// src/app/core/guards/permission.guard.ts
import { inject } from '@angular/core';
import { Router, CanActivateFn, ActivatedRouteSnapshot } from '@angular/router';
import { AuthService } from '@core/services/auth.service';

/**
 * Guard to protect routes by permissions
 */
export const permissionGuard: CanActivateFn = (route: ActivatedRouteSnapshot) => {
  const authService = inject(AuthService);
  const router = inject(Router);
  
  const requiredPermissions = route.data['permissions'] as string[];
  const requireAll = route.data['requireAll'] as boolean ?? true;
  
  if (!requiredPermissions || requiredPermissions.length === 0) {
    console.warn('Permission guard used without required permissions');
    return true;
  }
  
  const hasAccess = requireAll
    ? authService.(requiredPermissions)
    : authService.(requiredPermissions);
  
   (hasAccess) {
     ;
  }
  
   router.([]);
};

Login Component

// src/app/routes/passport/login/login.component.ts
import { Component, inject, signal } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService } from '@core/services/auth.service';
import { SHARED_IMPORTS } from '@shared';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [SHARED_IMPORTS],
  template: `
    <div class="login-container">
      <nz-card>
        <h2>Login</h2>
        <form nz-form [formGroup]="loginForm" (ngSubmit)="handleLogin()">
          <nz-form-item>
            <nz-form-control nzErrorTip="Please input your email!">
              <nz-input-group nzPrefixIcon="mail">
                <input 
                  nz-input 
                  formControlName="email" 
                  placeholder="Email"
                  type="email"
                />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          
          <nz-form-item>
            <nz-form-control nzErrorTip="Please input your password!">
              <nz-input-group nzPrefixIcon="lock">
                <input 
                  nz-input 
                  formControlName="password" 
                  placeholder="Password"
                  type="password"
                />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          
          @if (error()) {
            <nz-alert 
              nzType="error" 
              [nzMessage]="error()!" 
              nzShowIcon 
            />
          }
          
          <button 
            nz-button 
            nzType="primary" 
            nzBlock 
            [nzLoading]="loading()"
            [disabled]="loginForm.invalid"
          >
            Login
          </button>
        </form>
      </nz-card>
    </div>
  `
})
   {
   fb = ();
   authService = ();
  
  loading = ();
  error = signal< | >();
  
  :  = ..({
    : [, [., .]],
    : [, [., .()]]
  });
  
   (): <> {
     (..) ;
    
    ..();
    ..();
    
     {
       { email, password } = ..;
       ..(email, password);
    }  (err) {
      ..(err   ? err. : );
    }  {
      ..();
    }
  }
}

HTTP Interceptor (Auto Token Injection)

@delon/auth automatically provides an interceptor when configured. No manual implementation needed!

// Automatic token injection in all HTTP requests
// Configured in app.config.ts with provideDelonAuth()

// Example HTTP call - token automatically added
this.http.get('/api/tasks').subscribe(tasks => {
  // Authorization: Bearer {token} header automatically added
});

Component-Level Permission Check

import { Component, inject, computed } from '@angular/core';
import { AuthService } from '@core/services/auth.service';

@Component({
  selector: 'app-task-list',
  template: `
    @if (canCreate()) {
      <button nz-button nzType="primary" (click)="createTask()">
        Create Task
      </button>
    }
    
    @if (canEdit()) {
      <button nz-button (click)="editTask()">Edit</button>
    }
    
    @if (canDelete()) {
      <button nz-button nzDanger (click)="deleteTask()">Delete</button>
    }
  `
})
export class TaskListComponent {
  private authService = inject(AuthService);
  
  canCreate = computed(() => this.authService.hasPermission('create:tasks'));
  canEdit = computed(() => this.authService.hasPermission('edit:tasks'));
  canDelete = computed(() => this.authService.hasPermission('delete:tasks'));
}

Integration with @delon/acl

// src/app/app.config.ts
import { provideDelonACL } from '@delon/acl';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDelonACL()
  ]
};

// Sync permissions to ACL
import { ACLService } from '@delon/acl';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private aclService = inject(ACLService);
  
  private syncPermissionsToACL(permissions: string[], role: string): void {
    this.aclService.setRole([role]);
    this.aclService.setAbility(permissions);
  }
}

Routes Configuration

// src/app/routes/routes.ts
import { Routes } from '@angular/router';
import { authGuard } from '@core/guards/auth.guard';
import { roleGuard } from '@core/guards/role.guard';
import { permissionGuard } from '@core/guards/permission.guard';

export const routes: Routes = [
  {
    path: '',
    canActivate: [authGuard],
    children: [
      {
        path: 'dashboard',
        loadComponent: () => import('./dashboard/dashboard.component')
      },
      {
        path: 'admin',
        canActivate: [roleGuard],
        data: { role: 'admin' },
        loadComponent: () => import('./admin/admin.component')
      },
      {
        path: 'tasks',
        canActivate: [permissionGuard],
        data: { 
          permissions: ['read:tasks'],
          requireAll: true
        },
        loadComponent: () => import('./tasks/task-list.component')
      }
    ]
  },
  {
    : ,
    : [
      {
        : ,
        :  ()
      }
    ]
  }
];

Checklist

When implementing authentication:

• Configure @delon/auth in app.config.ts
• Create AuthService with token management
• Implement login/logout methods
• Set up token refresh mechanism
• Create auth guard for protected routes
• Create role/permission guards as needed
• Integrate with Firebase Auth
• Sync permissions with @delon/acl
• Handle token expiration
• Test authentication flow
• Test authorization checks
• Handle error states (invalid credentials, network errors)

References

• @delon/auth Documentation
• @delon/acl Documentation
• Firebase Auth
• JWT Best Practices