Persistencia de Datos de Login con Ionic Storage: Mantén a tus Usuarios Conectados

¡Hola, desarrolladores intrépidos! 😎 Hoy vamos a abordar un tema esencial para toda aplicación que requiera autenticación: la persistencia de datos del login. Si no quieres que tus usuarios tengan que iniciar sesión cada vez que abren la app, ¡esta guía con Ionic Storage es lo que necesitas! 🚀

¿Por qué es importante la persistencia de datos?

Imagínalo: tu usuario inicia sesión, cierra la app y al abrirla de nuevo, ¡pum!, tiene que volver a introducir sus credenciales. 🤦‍♂️ Nada mata más la experiencia de usuario que esto. Con Ionic Storage, puedes guardar los datos del login de forma segura y mantener al usuario autenticado, incluso después de cerrar la app o si el dispositivo se apaga.

Paso 1: Instalación de Ionic Storage

Primero, necesitamos instalar Ionic Storage en nuestro proyecto. Si aún no lo tienes configurado, abre la terminal y ejecuta:

ionic start myApp blank --type=angular
cd myApp

Una vez dentro de tu proyecto, instala Ionic Storage:

ionic cordova plugin add cordova-sqlite-storage
npm install @ionic/storage-angular

Paso 2: Configuración de Ionic Storage

Para usar Ionic Storage, primero hay que configurarlo en nuestro módulo principal. Dirígete a app.module.ts y añade la configuración correspondiente:

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

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    IonicStorageModule.forRoot()  // <-- Aquí añadimos la configuración
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Paso 3: Guardando los Datos del Login

Ahora que tenemos Ionic Storage configurado, vamos a crear un servicio que maneje la persistencia de los datos del login. En tu archivo auth.service.ts, puedes agregar el siguiente código:

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private _storage: Storage | null = null;

  constructor(private storage: Storage) {
    this.init();
  }

  async init() {
    const storage = await this.storage.create();
    this._storage = storage;
  }

  // Guardar los datos del login
  async saveLoginData(userData: any) {
    await this._storage?.set('user', userData);
  }

  // Recuperar los datos del login
  async getLoginData() {
    return await this._storage?.get('user');
  }

  // Borrar los datos del login (para logout)
  async clearLoginData() {
    await this._storage?.remove('user');
  }
}

¿Qué hace este servicio?

1. Guardar los datos del usuario: Almacena la información del usuario en Ionic Storage.
2. Recuperar los datos: Obtiene los datos almacenados, permitiendo que el usuario se mantenga autenticado.
3. Eliminar los datos: Para el proceso de logout, eliminamos la información almacenada.

Paso 4: Implementando el Login y Logout

Vamos a implementar las funciones de login y logout usando nuestro servicio de autenticación. En tu componente login.page.ts, haz lo siguiente:

import { Component } from '@angular/core';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage {
  username: string;
  password: string;

  constructor(private authService: AuthService) {}

  async login() {
    // Simulación de autenticación
    const user = { username: this.username, token: '123456' };
    
    // Guardamos los datos del usuario
    await this.authService.saveLoginData(user);
    console.log('Usuario autenticado y datos guardados');
  }

  async logout() {
    // Limpiamos los datos de login
    await this.authService.clearLoginData();
    console.log('Sesión cerrada y datos eliminados');
  }

  async checkLogin() {
    const userData = await this.authService.getLoginData();
    if (userData) {
      console.log('Usuario autenticado previamente:', userData);
      // Redirigir a otra página, por ejemplo, al dashboard
    } else {
      console.log('No hay datos de usuario, redirigir al login');
    }
  }
}

¿Qué pasa aquí?

• Login: Simulamos un proceso de autenticación y guardamos los datos del usuario.
• Logout: Eliminamos los datos del usuario cuando cierra la sesión.
• CheckLogin: Cuando la app se inicia, revisamos si hay datos del usuario guardados. Si existen, redirigimos al dashboard; si no, al login.

Consejo de JadrDev:

Cuando trabajes con datos sensibles, como los datos de login, asegúrate de cifrar la información antes de almacenarla. Ionic Storage es genial, pero si necesitas mayor seguridad, considera usar plugins como cordova-plugin-secure-storage para proteger aún más la información. 💡🔒