1

Estoy comenzando con Angular y hago un ejercicio básico, en el cual se valide que el usuario que ingresan en un login este en la base de datos, si es correcto que pase a una pagina de menú, sino que mande un mensaje de error, tengo el siguiente método que consulta a una base de datos en mysql

@CrossOrigin(origins= "http://localhost:4200")
@RestController
public class LoginController {

    @Autowired
    private LoginService loginService;

    @GetMapping(value = { "/listaUsuario/{usuario}" })
    public List<Login> buscaUsuario(@PathVariable("usuario") String usuario) {
        return loginService.consultaUsuario(usuario);
    }
}

y tengo mi formulario en Angular, app.comoponent.html

<app-header></app-header>
<div class="wrapper fadeInDown">
  <div id="formContent">
    <form>
      <h2>Login</h2>
      <input type="text" id="usuario" class="form-control" name="usuario" placeholder="Usuario">
      <br>
      <input type="text" id="password" class="form-control" name="password" placeholder="Password">
      <br>
      <button (click)="Enviar()" class="btn btn-primary">Acceder</button>
    </form>

  </div>
</div>

en el app.component.ts hice el método Enviar() el cual debe redireccionarte a la pagina menú

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'proyecto-vuelos';

  constructor(private router:Router){}

  Enviar(){
    this.router.navigate(["menu"])
  }
}

y en el app.module.ts importe el componente Menu

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { LoginComponent } from './Login/login/login.component';
import { MenuComponent } from './Menu/menu/menu.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    LoginComponent,
    MenuComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

y en el app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MenuComponent } from './Menu/menu/menu.component';

const routes: Routes = [{path: 'menu', component: MenuComponent}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

pero no se como conectar con mi método back para realizar la validación, que desde mi formulario se envié el usuario y llegue a mi método back para que consulte en la base de datos si existe o no, como se realiza eso?

1
  • 1
    La conexión se hace con peticiones HTTP. Desde Angular envías una petición al backend con los datos luego el backend envía una respuesta y con esa respuesta tomas decisiones de qué acciones tomar. Angular y el backend están desacoplados totalmente.
    – Lobos
    Commented el 5 mar. 2021 a las 19:54

1 respuesta 1

3

Angular sugiere una arquitectura en la que la recuperación y el guardado de los datos se realizan en una capa diferente a la de los controladores y las vistas. De hecho, los controladores no deberían de ninguna forma depender de implementaciones específicas para el acceso a los datos.

Ahora bien, existen los servicios, quienes son los responsables de recuperar y guardar los datos. Esto comúnmente puede ser un REST API, aunque también ser de otro tipo. Por ejemplo, la gestión del localstorage.

Como mencionas que trabajas con un REST API, lo primero es importar el módulo HttpClientModule en el app module, el cual nos da acceso a instancias de la clase HttpClient que podemos usar con DI (Inyección de dependencias).

Una vez hagas esto, puedes crear un servicio a partir de la línea de comandos con el siguiente comando.

ng generate service <nombre-servicio>

Esto te generará un esqueleto de un servicio y un archivo para pruebas unitarias. El servicio debería verse algo similar a lo siguiente.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class LoginService {

  constructor() { }

}

El decorador @Injectable te dejará inyectar esta clase en los constructores de los componentes que vayan a usar el servicio.

Asumiendo que el método de autenticación que utilices reciba un usuario y una contraseña, retorne un booleano, y sea un método POST, el siguiente fragmento de código se encarga de conectarse con el REST API.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class LoginService {

  constructor(
    private http: HttpClient) { }

  login(user: string, password: string): Observable<boolean> {
      return this.http.post<boolean>('url', {user, password});
  }

}

Por otra parte, las conexiones HTTP suelen ser operaciones asincrónicas, por lo que estarás manejando observables.

Luego, en el componente, lo que tienes que hacer es lo siguiente.

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from 'src/app/login.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
  title = 'proyecto-vuelos';
  subscription: Subscription;

  constructor(
    private router:Router,
    private loginService: LoginService){}

  enviar() {
    this.subscription = this.loginService.login('usuario', 'contrasena').subscribe(res => {
        if (res) {
            this.router.navigate(["menu"])
        }
    });
  }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }
}

Básicamente, se inyecta una instancia singleton del LoginService, y nos suscribimos al método login. Una vez se complete la petición, si la respuesta es true, entonces redireccionamos a la vista del menú.

Es importante darse de baja (unsubscribe) del observable, de lo contrario se pueden presentar pérdidas de memoria. (memory leak)

Recomiendo revises la documentación oficial de Angular para mayor profundidad en el tema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.