Agregar Guards a nuestro login

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