¬ŅQu√© es Ionic?

1

Requisitos del curso y presentación del proyecto

2

¬ŅQu√© hay de nuevo en Ionic 4?

3

¬ŅQu√© ha cambiado en Ionic?

4

Instalación de Ionic y templates básicos

5

Instalación de Capacitor y uso en Android Studio

6

Uso de Capacitor y xCode

7

Sincronizando nuestro proyecto con los emuladores

Componentes b√°sicos de Ionic

8

El componente Slides

9

CSS y Custom Properties de los componentes de Ionic

10

Slides din√°micos

11

Angular Router e Ionic Storage

12

Controlar la navegación con Guards

13

Utilidades de CSS con Ionic

14

Crear una p√°gina de login

15

Validar inputs del formulario de login

16

Envío del formulario

17

Servicio para validar credenciales

18

Agregar Guards a nuestro login

19

Crear una p√°gina de registro

20

Navegación entre login y registro

21

Agregar un men√ļ con el componente Menu

22

Dar funcionalidad y estilos al men√ļ

23

Uso de componente Slides y opciones avanzadas

Consumo y manejo de informacion con Ionic

24

Consumiendo un API para llenar información de nuestros artistas

25

P√°gina completa con artistas, canciones y √°lbums

26

El componente Modal y el Modal Controller

27

Llenar de contenido el Modal

28

Componente Footer y funcionalidad del Modal

29

Construyendo nuestro reproductor

30

Lógica de nuestro reproductor

31

RETO: Vista de √°lbums

Acceso al hardware

32

Usar la cámara a través de Capacitor

33

Corrección de errores y afinando detalles

34

Mejorando nuestra p√°gina de Settings con CSS

35

P√°gina Sports y Angular Maps

36

Crear la p√°gina Sport

37

RETO: Buscador din√°mico en Sports

38

Llevar nuestra aplicación a producción con Android

39

Llevar nuestra aplicación a producción con iOS y cierre del curso

No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

Agregar Guards a nuestro login

18/39
Recursos

Aportes 7

Preguntas 6

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Agregar Guards a nuestro login
Si el usuario ya sé hizo login no vamos a volver a solicitarlo
Para esto vamos a usar guard de autenticación.
ionic g guard guards/login
Opera igual que el guard de intro
.
Ingresamos al guard
copiamos lo que tenemos en el interior del guard intro,
en la definición de la clase tenemos que escribir canActivate
Preguntamos si el usuario hizo login con isUserLoggedIn
si es true retornamos true,
si es false dirigimos a /login

constructor(
    private storage: Storage,
    private router: Router
  ){}
 
  async canActivate(){
    const isUserLoggedIn = await this.storage.get('isUserLoggedIn');
    if(isUserLoggedIn){
      return true;
    }
    else{
      this.router.navigateByUrl('/login');
    }
  }

Importamos el Router de angular y el Storage.

import { Storage } from '@ionic/storage';

Para implementarlo.
tenemos que agregarlo a app-routing.module.ts
en canActivate

canActivate: [IntroGuard, LoginGuard]
import { LoginGuard } from './guards/login.guard';

Definimos isUserLoggedIn en login.page.ts
Primero Inyectamos Storage

private storage: Storage
import { Storage } from '@ionic/storage';

luego antes de redirigir al home debemos setear isUserLoggedIn en verdadero

this.storage.set('isUserLoggedIn', true);

La duda q me genera esta clase es si no seria mejor utilizar el storage en el archivo ‚ÄúService‚ÄĚ???‚Äô

Excelente clase…

No se por que pero de alguna forma la primera vez guado la informacion en IndexedDB y ahora en Web SQL

IONIC 6

En el archivo login.page.ts deben hacer varios pasos, importar Storage

import { Storage } from '@ionic/storage-angular';

Inyectar el Storage al constructor

  constructor(
    private formBuilder: FormBuilder,
    private authenticateService: AuthenticateService,
    private router: Router,
    private storage: Storage
  ) {

Crear el Storage

  async ngOnInit() {
    await this.storage.create();
  }

Validar al usuario, modifique un poco el método con un try / catch.

  async loginUser(credentials) {
    try {
      await this.authenticateService.loginUser(credentials);
      this.storage.set('isUserLoggedIn', true);
      this.router.navigate(['/home']);
    } catch (error) {
      this.errorMessage = error;
    }
  }

Muy interesante la clase profesor. Nada mas un punto a resaltar: Es que cuando se resetean los valores de todos nuestros storages(isUserLoggedIn, isIntroShowed), y querido acceder al index del proyecto (localhost:8100), pues la primera pagina a la que me redirige es al login(una vez hecho el login nos redirige al intro), cuando en teoria deberia de redirigir primeramente a la intro del proyecto y luego al login. Espero se haya entendido mi comentario y que durante el transcurso del curso pueda encontrar una solucion. O aqui en los comentarios.

Si alguno les sale Error: Database not created. Must call create() first

Deben colocar en login.page.ts
async ngOnInit() {
await this.storage.create();
}

lo unico diferente al dia de hoy es poner en el constructor del archivo de login.page.ts:

this.storage.create()

Aca el link al repo con el commit de esta clase para el que le sirva