5. AdminComponent (protegido)

Zona admin: src/app/pages/admin/

ng g c pages/admin --standalone

src/app/pages/admin/admin.component.ts

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


@Component({
  selector: 'app-admin',
  imports: [],
  templateUrl: './admin.html',
  styleUrl: './admin.css',
})
export class AdminComponent {
 auth = inject(AuthService);
  private router = inject(Router);

  token = '';

  async showToken() {
    this.token = (await this.auth.getIdToken()) ?? '';
  }

  async logout() {
    await this.auth.logout();
    this.router.navigateByUrl('/login');
  }
}

css

.token {
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 12px;
}

.logout {
  margin-top: 12px;
}

admin.html

<h2>Admin</h2>

@if (auth.user()) {
  <p>Sesión: {{ auth.user()?.email }}</p>
}

<button (click)="showToken()">Ver ID Token</button>

@if (token) {
  <pre class="token">{{ token }}</pre>
}

<button class="logout" (click)="logout()">Logout</button>

Rutas

src/app/app.routes.ts

iimport { Routes } from '@angular/router';

import { authGuard } from './core/auth/auth.guard';

export const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },

  {
    path: 'login',
    loadComponent: () => import('./pages/login/login').then(m => m.LoginComponent),
  },
  {
    path: 'admin',
    canActivate: [authGuard],
    loadComponent: () => import('./pages/admin/admin').then(m => m.AdminComponent),
  },

  { path: '**', redirectTo: 'login' },
];

Tu app.html (para navegar)

src/app/app.ts

import { Component, signal } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet,RouterLink, RouterLinkActive],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('app-angular');
}

src/app/app.html

<nav class="nav">
  <a routerLink="/login" routerLinkActive="active">Login</a>
  <a routerLink="/admin" routerLinkActive="active">Admin</a>
</nav>

<router-outlet></router-outlet>

src/app/app.css

.nav { display: flex; gap: 12px; padding: 12px 0; }
a { text-decoration: none; }

.active {
  font-weight: bold;
  text-decoration: underline;
}