Application mobile Ionic + Vue avec une API Laravel : architecture et authentification

Ionic permet de publier la même application Vue sur iOS, Android et le web, avec une interface native-like, tandis que Laravel fournit l'API et la logique métier. Cette association est efficace, à condition de poser une architecture claire dès le départ : séparation entre l'interface et les appels réseau, authentification par jeton, gestion des erreurs et stockage sécurisé. Voici la marche à suivre.

1. Créer le projet

Avec le CLI Ionic (vérifiez les commandes exactes dans la documentation de votre version) :

npm install -g @ionic/cli
ionic start mon-app tabs --type vue --capacitor
cd mon-app
ionic serve

Capacitor est la couche qui emballe l'application web dans une application native et donne accès aux fonctions du téléphone (stockage, caméra, notifications). Ajoutez ensuite les plateformes avec npx cap add ios et npx cap add android quand vous êtes prêt à tester sur appareil.

2. Structurer le code

Pour éviter que les appels réseau ne se dispersent dans les composants, adoptez trois couches :

• services/api.ts : un client HTTP unique, configuré avec l'URL de base et les en-têtes ;
• stores/ (Pinia) : l'état partagé (utilisateur connecté, listes), qui appelle les services ;
• views/ et components/ : l'affichage, sans logique d'accès aux données.

Définissez l'URL de l'API dans une variable d'environnement (VITE_API_URL) pour passer facilement du développement à la production.

3. Configurer le client HTTP

import axios from 'axios';

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL + '/api/v1',
  headers: { Accept: 'application/json' },
});

api.interceptors.request.use((config) => {
  const token = getToken(); // lu depuis le stockage sécurisé
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      logout(); // jeton invalide ou expiré : retour à l'écran de connexion
    }
    return Promise.reject(error);
  }
);

L'en-tête Accept: application/json est important : sans lui, Laravel peut renvoyer des redirections HTML au lieu d'erreurs JSON.

4. Authentifier avec un jeton Sanctum

Côté Laravel, la route de connexion vérifie les identifiants et renvoie un jeton d'accès personnel ; nous détaillons ce mécanisme dans notre guide API REST Laravel : versionnement, Sanctum et ressources. Côté application, le parcours est :

1. l'utilisateur saisit ses identifiants ;
2. l'application appelle POST /api/v1/login ;
3. le jeton reçu est enregistré de façon sécurisée ;
4. chaque requête suivante envoie Authorization: Bearer <jeton> ;
5. à la déconnexion, l'application appelle l'API pour révoquer le jeton, puis l'efface.

5. Stocker le jeton correctement

Le stockage web classique (localStorage) est lisible par tout script de la page, et le plugin Preferences de Capacitor n'est pas chiffré. Pour un jeton d'accès, utilisez un plugin de stockage sécurisé qui s'appuie sur le Keychain iOS et le Keystore Android. Sur la version web de l'application, acceptez que la protection soit moindre et limitez la durée de vie des jetons. Ne placez jamais de secret serveur dans le code de l'application : tout ce qui est embarqué est lisible.

6. Configurer CORS côté Laravel

Lors des tests dans le navigateur (ionic serve), les requêtes vers l'API sont des requêtes inter-domaines : sans configuration CORS, elles échouent. Dans config/cors.php, autorisez les chemins api/* et l'origine de développement (par exemple http://localhost:8100), puis restreignez en production aux origines réellement utilisées. Les applications natives empaquetées par Capacitor utilisent des origines spécifiques (capacitor://localhost, http://localhost) qu'il faut aussi prévoir.

7. Gérer les erreurs et le mode hors ligne

• Affichez des messages d'erreur clairs pour les erreurs de validation (code 422), en utilisant le détail fourni par Laravel.
• Gérez les pertes de réseau : indicateur de chargement, nouvelle tentative, message explicite.
• Mettez en cache localement les données consultées souvent, pour une première ouverture rapide.
• Utilisez la pagination de l'API plutôt que de charger de grosses listes.

8. Sécuriser et publier

• Exigez HTTPS pour toute communication avec l'API.
• Limitez le débit des routes de connexion et appliquez les recommandations de notre article sur les bonnes pratiques de cybersécurité.
• Prévoyez la compatibilité entre versions : les anciennes versions de l'application resteront utilisées pendant des mois, d'où l'intérêt du versionnement /api/v1.
• Pour l'interface d'administration associée, un back-office comme celui présenté dans notre guide Filament 4 évite de développer deux fois les mêmes écrans.

Si vous hésitez sur la technologie du front pour le web, notre comparatif Livewire ou Inertia peut aussi vous aider.

Conclusion

Une application Ionic + Vue sur une API Laravel reste simple tant que chaque couche garde son rôle : l'API valide, autorise et renvoie des données propres ; l'application affiche et gère l'expérience. Un client HTTP centralisé, des jetons stockés de façon sécurisée, une API versionnée et des erreurs bien gérées suffisent à obtenir une base solide pour faire évoluer l'application.