¿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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

Controlar la navegación con Guards

12/39
Recursos

Aportes 19

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Cordial saludo.

Profe, que tan seguro es guardar los tokens de autorización en el local storage ? tanto web cómo de celulares.

tengo este error: ERROR Error: Uncaught (in promise): Error: Database not created. Must call create() first
Error: Database not created. Must call create() first
at Storage.assertDb (index.js:64)

Es seguro guardar una sesión en el storage?

2021-06-15
Con la versión 6 de Ionic, el chequeo del flag isIntroShowed produce un error en consola informando que la Base de Datos no ha sido creada. Esto sucede si dicha variable aún no ha sido inicializada.
Para esto creé un try-catch en el archivo intro.guards.ts

  async canActivate(){
    try{
      const isIntroShowed = await this.storage.get('isIntroShowed');
      if(isIntroShowed)
        return true;
      else
        this.router.navigateByUrl('/intro');     
    }catch(error){
      this.router.navigateByUrl('/intro');
    }
  }

IONIC 6

Se usan las Route Guards para proteger partes de la App de usuarios no autorizados, para el ejercicio de la clase se crea la Guard:

ionic generate guard guards/intro

El archivo src/app/guards/intro.guard.ts debe quedar así:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Storage } from '@ionic/storage-angular';

@Injectable({
  providedIn: 'root',
})
export class IntroGuard implements CanActivate {
  constructor(private storage: Storage, private router: Router) {
    this.storage.create();
  }

  async canActivate() {
    const isIntroShowed = await this.storage.get('isIntroShowed');
    if (isIntroShowed) {
      return true;
    } else {
      this.router.navigateByUrl('/intro');
    }
  }
}

Importante en el constructor se debe crear el Storage.
.
En el archivo src/app/app-routing.module.ts se deben adicionar el Guard en la ruta home:

import { IntroGuard } from './guards/intro.guard';
const routes: Routes = [
  {
    path: 'home',
    loadChildren: () =>
      import('./home/home.module').then((m) => m.HomePageModule),
    canActivate: [IntroGuard],
  },
...

si a alguno le ha pasado, como a mi, que necesitaban darle click 2 veces al boton close para que los dirijan al home, les suguiero volver la funcion finish asincrona

async finish() {
    await this.storage.set('isIntroShowed', true);
    this.router.navigateByUrl('/home');
  }

En ionic 5 al ejecutar este comando, solicita esta seleccion:

$ ionic generate guard guards/intro
> ng generate guard guards/intro
? Which interfaces would you like to implement? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ CanActivate
 ◯ CanActivateChild
 ◯ CanDeactivate
 ◯ CanLoad

¿Qué debo seleccionar?

?Alguien sabe porqué en Google Chrome no puedo eliminar la variable “isIntroShowed”?, simplemente no aparece el icon con que Sebastian borra el valor del Storage.

Esta clase me callo como anillo al dedo, precisamente me estaba preguntando sobre como hacer esto en Ionic y aparece esta clase, muchas gracias Profe por esta excelente clase.

Guards, son varibles de seguridad y de funcionalidad que permiten (true or false) o no la entrada de un usuario.

ionic generate guard guards/intro

los guards requieren una variable que se improrta llamada CanActivate que se debe implementa en la clase IntroGuard, seguido de la condición, que consiste en buscar en el storage si la variable isIntroShowed existe.

@Injectable({
  providedIn: "root"
})
export class IntroGuard implements CanActivate {
  constructor(private storage: Storage, private router: Router) {}
  async canActivate() {
    const isIntroShowed = await this.storage.get("isIntroShowed");
    if (isIntroShowed) {
      return true;
    } else {
      this.router.navigateByUrl("/intro");
    }
  }
}

Brutal esta clase, tuve que repetirla 2 veces más para entrar en contexto, pero muy bueno el uso de guard

**Al intentar correr la aplicación obtuve el siguiente error: **

core.js:6479 ERROR Error: Uncaught (in promise): Error: Database not created. Must call create() first
Error: Database not created. Must call create() first

Entonces agregue la siguiente linea de codigo antes de usar el storage.get y storage.set

this.storage.create();

**queda algo asi: **

Dentro del canActivate del guard

this.storage.create();
    const isIntroShowed = await this.storage.get('isIntroShowed');
    if(isIntroShowed){
      return true;
    }else{
      this.router.navigate(['/intro']);
    }

Dentro de la funcion close de la clase intro

this.storage.create();
    this.storage.set('isIntroShowed',true);
    this.router.navigate(['/home']);

Compañeros/as
Cuando se realizo este curso, ya hace casi mas de dos años al día de hoy, Solo existía el ionic para Angular, ahora eso cambio y ademas de poder usar Angular, se puede usar react.
Es entonces que para los que tienen la aplicación en angular la configuración del “app.module.ts” es de la siguiente manera

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

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,    IonicStorageModule.forRoot({
    name: '__mydb',
    driverOrder: [Drivers.IndexedDB, Drivers.LocalStorage]
  })]

Para el archivo “intro.page.ts”

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

constructor(private router: Router, private storage: Storage) {}
  finish() {
    this.storage.set('isIntroShowed', true);
    this.router.navigateByUrl('/home');
  }

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

Para el archivo “intro.guard.ts”

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

  constructor(private storage: Storage, private router: Router) {
     this.storage.create();
  }

Pero si quieres tener dos guards se podría hacer o debes solo validar las dos condiciones en un solo guard ejemplo si quieres que el intro se muestre solo una vez y además solo accedas al home si esta hecho login ?

¿En general que es un guard?

Profe, una consulta
en una aplicacion con template TABS se tiene dos routing.
tabs-routing.module.ts
app-routing.module.ts

colocarias canActivate en tabs-routing.module.ts, protegiendo cada una de las paginas?

Una consulta al utilizar el guard el icono de la X no permite cerrar ayúdenme por favor quisiera saber en que parte del código me equivoque

Hola amigos.
Al intentar incluir IonicStorageModule.forRoot() al arreglo de imports deja de funcionar el proyecto, muestra error en la consola del Chrome.

core.js:36228 Uncaught TypeError: Cannot read property ‘id’ of undefined
at registerNgModuleType (core.js:36228)
at core.js:36246
at Array.forEach (<anonymous>)
at registerNgModuleType (core.js:36242)
at new NgModuleFactory$1 (core.js:36407)
at compileNgModuleFactory__POST_R3__ (core.js:42296)
at PlatformRef.bootstrapModule (core.js:42663)
at Module…/src/main.ts (main.ts:11)
at webpack_require (bootstrap:84)
at Object.0 (main.ts:12)

A alguien más le ha pasado? Aguna idea de cómo resolverlo?

Gracias de antemano.

Yo no veo mis variables en applications???
que puede ser