> ## Documentation Index
> Fetch the complete documentation index at: https://anghelomp10-biblioteca-virtual-frontend.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Routing Configuration

> Complete routing setup with guards and navigation patterns

## Overview

Biblioteca Virtual uses Angular's standalone routing system with functional route guards. The routing configuration defines access control for public routes (login/register), authenticated user routes (catalog), and admin-only routes (management pages).

## Route Configuration

All routes are defined in `app.routes.ts` with appropriate guards for access control:

```typescript src/app/app.routes.ts theme={null}
import { Routes } from '@angular/router';
import { authGuard } from './core/guards/auth-guard';
import { publicGuard } from './core/guards/public-guard';
import { adminGuard } from './core/guards/admin-guard';

export const routes: Routes = [
  // Default redirect to login
  { path: '', redirectTo: 'auth/login', pathMatch: 'full' },

  // Public routes (unauthenticated users only)
  { path: 'auth/login', component: LoginComponent, canActivate: [publicGuard] },
  { path: 'auth/registro', component: RegistroComponent, canActivate: [publicGuard] },

  // User routes (authenticated users)
  { path: 'catalogo', component: CatalogoComponent, canActivate: [authGuard] },

  // Admin routes (authenticated admins only)
  { path: 'libros', component: LibroListComponent, canActivate: [authGuard, adminGuard] },
  { path: 'libros/nuevo', component: LibroFormComponent, canActivate: [authGuard, adminGuard] },
  { path: 'libros/editar/:id', component: LibroFormComponent, canActivate: [authGuard, adminGuard] },
  
  { path: 'autores', component: AutorListComponent, canActivate: [authGuard, adminGuard] },
  { path: 'autores/nuevo', component: AutorFormComponent, canActivate: [authGuard, adminGuard] },
  { path: 'autores/editar/:id', component: AutorFormComponent, canActivate: [authGuard, adminGuard] },
  
  { path: 'generos', component: GeneroListComponent, canActivate: [authGuard, adminGuard] },
  { path: 'generos/nuevo', component: GeneroFormComponent, canActivate: [authGuard, adminGuard] },
  { path: 'generos/editar/:id', component: GeneroFormComponent, canActivate: [authGuard, adminGuard] },
  
  { path: 'prestamos', component: PrestamoListComponent, canActivate: [authGuard, adminGuard] },

  // Wildcard - redirect to login
  { path: '**', redirectTo: 'auth/login' },
];
```

## Route Categories

### Public Routes

Public routes are accessible only to unauthenticated users. The `publicGuard` redirects logged-in users to their appropriate dashboard.

```typescript Login Route theme={null}
{
  path: 'auth/login',
  component: LoginComponent,
  canActivate: [publicGuard]
}
```

```typescript Registration Route theme={null}
{
  path: 'auth/registro',
  component: RegistroComponent,
  canActivate: [publicGuard]
}
```

> [!NOTE]
>
> When a logged-in user tries to access `/auth/login`, they are automatically redirected to:
>
> * `/libros` (admins)
> * `/catalogo` (regular users)

### Authenticated User Routes

Routes that require authentication but are available to both users and admins:

```typescript User Catalog Route theme={null}
{
  path: 'catalogo',
  component: CatalogoComponent,
  canActivate: [authGuard]  // Any authenticated user
}
```

### Admin-Only Routes

Admin routes use **both** `authGuard` and `adminGuard` to ensure the user is authenticated AND has admin privileges:

**Books (Libros)**

```typescript theme={null}
// List all books
{ path: 'libros', component: LibroListComponent, canActivate: [authGuard, adminGuard] }

// Create new book
{ path: 'libros/nuevo', component: LibroFormComponent, canActivate: [authGuard, adminGuard] }

// Edit existing book
{ path: 'libros/editar/:id', component: LibroFormComponent, canActivate: [authGuard, adminGuard] }
```

**Authors (Autores)**

```typescript theme={null}
// List all authors
{ path: 'autores', component: AutorListComponent, canActivate: [authGuard, adminGuard] }

// Create new author
{ path: 'autores/nuevo', component: AutorFormComponent, canActivate: [authGuard, adminGuard] }

// Edit existing author
{ path: 'autores/editar/:id', component: AutorFormComponent, canActivate: [authGuard, adminGuard] }
```

**Genres (Géneros)**

```typescript theme={null}
// List all genres
{ path: 'generos', component: GeneroListComponent, canActivate: [authGuard, adminGuard] }

// Create new genre
{ path: 'generos/nuevo', component: GeneroFormComponent, canActivate: [authGuard, adminGuard] }

// Edit existing genre
{ path: 'generos/editar/:id', component: GeneroFormComponent, canActivate: [authGuard, adminGuard] }
```

**Loans (Préstamos)**

```typescript theme={null}
// List all loans
{ path: 'prestamos', component: PrestamoListComponent, canActivate: [authGuard, adminGuard] }
```

## Guard Execution Order

When multiple guards are specified, they execute in order from left to right:

```typescript theme={null}
canActivate: [authGuard, adminGuard]
```

**1. authGuard executes first**

Checks if the user has a valid JWT token

* **Pass**: Continue to next guard
* **Fail**: Redirect to `/auth/login`

**2. adminGuard executes second**

Checks if the user's role is `ROLE_ADMIN`

* **Pass**: Allow access to route
* **Fail**: Redirect to `/catalogo`

> [!WARNING]
>
> Guards must be in the correct order. Placing `adminGuard` before `authGuard` could cause errors if the user is not authenticated.

## Route Parameters

Edit routes use dynamic route parameters to identify which resource to edit:

```typescript theme={null}
{ path: 'libros/editar/:id', component: LibroFormComponent }
```

### Accessing Route Parameters

In the component, access the `id` parameter using Angular's `ActivatedRoute`:

```typescript theme={null}
import { ActivatedRoute } from '@angular/router';

export class LibroFormComponent {
  private route = inject(ActivatedRoute);
  
  ngOnInit() {
    const id = this.route.snapshot.params['id'];
    // Load book with this ID
  }
}
```

## Navigation Patterns

### Programmatic Navigation

Navigate using Angular's `Router` service:

```typescript theme={null}
import { Router } from '@angular/router';

export class SomeComponent {
  private router = inject(Router);
  
  goToBookList() {
    this.router.navigate(['/libros']);
  }
  
  editBook(id: number) {
    this.router.navigate(['/libros/editar', id]);
  }
  
  createNewBook() {
    this.router.navigate(['/libros/nuevo']);
  }
}
```

### Template Navigation

Use `routerLink` directive in templates:

```html theme={null}
<!-- Navigate to list -->
<a routerLink="/libros">Ver Libros</a>

<!-- Navigate to create -->
<button (click)="router.navigate(['/libros/nuevo'])">Nuevo Libro</button>

<!-- Navigate to edit with ID -->
<a [routerLink]="['/libros/editar', libro.id]">Editar</a>
```

## Redirect Behavior

### Default Redirect

When users access the root path `/`, they are redirected to login:

```typescript theme={null}
{ path: '', redirectTo: 'auth/login', pathMatch: 'full' }
```

### 404 Handling

Unknown routes redirect to login:

```typescript theme={null}
{ path: '**', redirectTo: 'auth/login' }
```

### Role-Based Redirects

The `publicGuard` implements intelligent redirects based on user role:

```typescript src/app/core/guards/public-guard.ts theme={null}
if (token) {
  const role = localStorage.getItem('role');
  
  if (role === 'ROLE_ADMIN') {
    router.navigate(['/libros']);      // Admins → Book management
  } else {
    router.navigate(['/catalogo']);    // Users → Catalog
  }
  
  return false;
}
```

## Route Protection Summary

<table>
  <thead>
    <tr>
      <th>Route Pattern</th>
      <th>Guards</th>
      <th>Access</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>`/auth/login`</td>
      <td>`publicGuard`</td>
      <td>Unauthenticated users only</td>
    </tr>

    <tr>
      <td>`/auth/registro`</td>
      <td>`publicGuard`</td>
      <td>Unauthenticated users only</td>
    </tr>

    <tr>
      <td>`/catalogo`</td>
      <td>`authGuard`</td>
      <td>Any authenticated user</td>
    </tr>

    <tr>
      <td>`/libros/*`</td>
      <td>`authGuard, adminGuard`</td>
      <td>Admins only</td>
    </tr>

    <tr>
      <td>`/autores/*`</td>
      <td>`authGuard, adminGuard`</td>
      <td>Admins only</td>
    </tr>

    <tr>
      <td>`/generos/*`</td>
      <td>`authGuard, adminGuard`</td>
      <td>Admins only</td>
    </tr>

    <tr>
      <td>`/prestamos`</td>
      <td>`authGuard, adminGuard`</td>
      <td>Admins only</td>
    </tr>
  </tbody>
</table>

## Common CRUD Patterns

Most admin features follow this routing pattern:

```typescript List View theme={null}
{ path: 'resource', component: ResourceListComponent, canActivate: [authGuard, adminGuard] }
```

```typescript Create Form theme={null}
{ path: 'resource/nuevo', component: ResourceFormComponent, canActivate: [authGuard, adminGuard] }
```

```typescript Edit Form theme={null}
{ path: 'resource/editar/:id', component: ResourceFormComponent, canActivate: [authGuard, adminGuard] }
```

> [!NOTE]
>
> The same form component (`ResourceFormComponent`) is used for both create and edit operations. The presence of an `id` parameter determines which mode to use.

## Best Practices

> **Always Use Guards**
>
> Every route should have appropriate guards to prevent unauthorized access

> **Guard Order Matters**
>
> Place `authGuard` before `adminGuard` to ensure proper authentication checks

> **Reuse Form Components**
>
> Use the same component for create and edit by checking route parameters

> **Fallback Routes**
>
> Always define a wildcard route to handle 404 scenarios

## Next Steps

> **[Authentication](https://anghelomp10-biblioteca-virtual-frontend.mintlify.site/architecture/authentication.md)**
>
> Learn how JWT authentication works

> **[Authorization Guards](https://anghelomp10-biblioteca-virtual-frontend.mintlify.site/architecture/authorization.md)**
>
> Deep dive into guard implementation

> **[Navigation Component](https://anghelomp10-biblioteca-virtual-frontend.mintlify.site/api/components/login.md)**
>
> Explore the navbar component

> **[Form Components](https://anghelomp10-biblioteca-virtual-frontend.mintlify.site/api/components/libro-form.md)**
>
> Build CRUD forms with routing


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.