Angular. Implementando Login.


Hasta este momento hemos tenido siempre visible nuestra app angular con la parte publica (la que va a ver cualquier usuario que entre a la app).

¿Qué ocurre si vamos a implementar una administración?

Bueno, pues es el momento de empezar a separar cosas y usar las rutas de Angular para el funcionamiento. Lo que vamos a hacer es separar nuestra app, de momento, en tres rutas: “client” (para los visitantes), “login”, para el formulario de entrada a la administración, y “admin” para la administración en si.

Para ello, hay que modificar un poco nuestra aplicación.

Comenzamos por crear un nuevo modulo con ng generate module routes. Con esto generaremos un nuevo archivo en el que vamos a colocar la logica de nuestras rutas de aplicación para que pueda funcionar.

A partir de aquí, tendremos que rellenar todos los campos para que las rutas sean reconocidas y utilizadas en nuestra app. Así que vamos por pasos:

  • routes\routes.module.ts

  • app.component.html. Este únicamente necesita estar compuesto por
  • main.ts. Aquí indicaremos nuestro modulo de rutas y que se utilicen en el inicio del modulo de la app.

  • app.module.ts. Aqui tenemos que declarar las rutas e importarlas para que sean usadas correctamente. Sino habrá errores.

Ahora generaremos los componentes que formarán el login y la entrada a la administración.

  • ng generate component common\login. Con esto generaremos el componente del formulario de login.
  • ng generate component admin\main. Con esto generamos el componente de entrada a la administración.
  • ng generate service services\login. Con esto generaremos el servicio que se encargara de procesar los datos.

Y finalmente los poblaremos. De momento en la clase login está una clase “User” con los datos a pelo, en otra entrega utilizaremos un servicio para consumir los datos de la API que creamos con Laravel para hacer el login.

  • login.service.ts

  • login.component.ts

  • login.component.html

  • main.component.ts

  • main.component.html

Con todos estos pasos, si comprobamos en nuestro navegador (teniendo encendido el servidor de angular de desarrollo, claro, con npm start), podremos ver que las rutas funcionan.

La ruta raíz (“/” o ” “) nos redirige automaticamente a la parte cliente (lo que hemos estado personalizando hasta ahora).

La ruta de administración (“admin”) nos redirige al formulario de login (ruta “login”) si no nos hemos autentifcado, y nos muestra el mensaje de autenticación correcta y el link de logout.

Y con esto estamos en condiciones de ir desarrollando tanto la administración como la parte cliente.

En proximas entradas iremos viendo componentes, servicios y datos necesarios. Tambien volveremos a Laravel cuando haya detalles que impliquen nuevas situaciones con la API.

Muchas gracias por seguir hasta aquí 🙂

Actualizacion: una cosa más, para que funcione en el servidor apache, una vez compilada la web con ng build --prod es necesario que exista un archivo .htaccess con el siguiente contenido. Sino, las rutas no funcionaran: