Implementar autenticación en Angular con Json Web Tokens (JWT) arranca con una base sólida: dos páginas de login y registro, rutas claras y un servicio centralizado de autorización. A continuación se muestra cómo estructurar componentes, maquetar con Bootstrap y preparar un servicio reutilizable, dejando lista la integración posterior con Firebase.

¿Qué construimos para la autenticación con Angular y JWT?

Empezamos creando dos componentes: login y registro. Se duplicó el componente de contacto y se renombraron archivos y selectores para cada caso. Luego, se configuraron rutas en AppModule y se añadió una barra de navegación con enlaces a ambos formularios usando routerLink. Finalmente, se creó un autorizacionService con métodos login y registro, inyectado en los componentes para probar su ejecución con console.log.

• Habilidades practicadas: creación de componentes en Angular. Configuración de rutas. Maquetación con Bootstrap. Inyección de dependencias. Uso de services y funciones flecha. Pruebas con console.log.
• Conceptos clave: Json Web Tokens (JWT). routerLink. @Injectable. navbar-right. Clases de Bootstrap como container, row, col-md-4, col-md-offset-4, well, btn, btn-primary, btn-default, btn-block.

¿Cómo crear las páginas de login y registro con Bootstrap?

Primero se generó el componente de login, ajustando selector, template y ruta. Luego se maquetó un formulario centrado con la grilla de Bootstrap, y se repitió el proceso para registro.

¿Cómo configurar el componente de login?

• Duplicar el componente existente y renombrarlo a LoginComponent.
• Actualizar selector a app-login y el templateUrl a login.component.html.

fullscreen
// login.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {}

¿Cómo maquetar el formulario con Bootstrap?

• Centrar el formulario con col-md-4 y col-md-offset-4 dentro de un container y row.
• Usar form-control para los campos y botones con btn.

fullscreen
<!-- login.component.html -->
<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <div class="well">
        <h1>login</h1>
        <label>email</label>
        <input type="email" class="form-control">
        <br>
        <label>contraseña</label>
        <input type="password" class="form-control">
        <hr>
        <a class="btn btn-primary btn-block">login</a>
        <a class="btn btn-default btn-block">cancelar</a>
      </div>
    </div>
  </div>
</div>

Para registro, se duplicó el de login, se renombraron archivos y referencias, y se cambió el título a “registrarse”.

fullscreen
// registro.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-registro',
  templateUrl: './registro.component.html'
})
export class RegistroComponent {}

¿Cómo declarar rutas y un servicio de autorización reutilizable?

Se añadieron rutas en AppModule para login y registro. Luego, se incorporó una navbar con enlaces a la derecha y se creó un service autorizacion.service.ts con métodos mínimos para probar el flujo.

¿Cómo definir rutas en AppModule?

• Agregar rutas login y registro con sus componentes.
• Incluir componentes en declarations y el servicio en providers.

fullscreen
// app.module.ts (fragmento)
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegistroComponent } from './registro/registro.component';
import { AutorizacionService } from './services/autorizacion.service';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'registro', component: RegistroComponent }
];

@NgModule({
  declarations: [LoginComponent, RegistroComponent],
  imports: [RouterModule.forRoot(routes)],
  providers: [AutorizacionService]
})
export class AppModule {}

¿Cómo añadir enlaces en la barra de navegación?

• Usar una lista en la navbar con la clase navbar-right para alinear a la derecha.
• Enlaces con routerLink hacia /login y /registro.

fullscreen
<!-- app.component.html (fragmento) -->
<ul class="nav navbar-nav navbar-right">
  <li><a routerLink="/login">login</a></li>
  <li><a routerLink="/registro">registro</a></li>
</ul>

¿Cómo crear e inyectar el servicio de autorización?

• Declarar AutorizacionService con @Injectable().
• Implementar métodos login y registro con funciones flecha y console.log.
• Inyectar el servicio en los constructores de los componentes y llamar a los métodos con datos de prueba.

fullscreen
// services/autorizacion.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class AutorizacionService {
  public login = (email: string, password: string) => {
    console.log('método login');
  };

  public registro = (email: string, password: string) => {
    console.log('método registro');
  };
}

fullscreen
// login.component.ts (uso del servicio)
constructor(private autorizacionService: AutorizacionService) {
  this.autorizacionService.login('demo@email.com', '123456');
}

// registro.component.ts (uso del servicio)
constructor(private autorizacionService: AutorizacionService) {
  this.autorizacionService.registro('demo@email.com', '123456');
}

Con esto quedan listas las vistas, las rutas, la navbar y el service para avanzar al registro de usuarios con Firebase en el siguiente paso.

¿Tienes dudas sobre la estructura, las rutas o el servicio? Cuéntalo en los comentarios y comparte qué parte te gustaría profundizar a continuación.