Custom ES6 Decorator avec Ionicframework

Les décorateurs sont une fonctionnalité ECMA script qui a été introduit avec la version ES6. Les décorateurs permettent d’altérer la configuration d’une Class juste avant sa génération. Vous en avez déjà rencontré lors de l’utilisation de framework comme Angular ou Ionic, mais dans cet article je vais vous montrer comment créer votre propre custom decorator et comment l’utiliser dans une situation concrète avec Ionic.

Créer son propre custom décorateur pour Ionic

Avant de commencer à vous expliquez comment concevoir un custom Decorator pour vos projets Ionic, je vais planter le décor:
Lors de la conception de vos applications, vous avez certainement déjà eu à implémenter un espace avec un accès restreint ou un système d’authentification de vos utilisateurs.

Vous avez ensuite dû mettre en place sur chacune de vos pages protégées ou nécessitant une authentification, un système de vérification qui permet de s’assurer que l’utilisateur est bien authentifié.

C’est précisément sur ce point que nous allons travailler avec notre custom Decorator! Nous allons créer un décorateur qui s’occupera de vérifier l’authentification de nos utilisateurs avant de leur donner l’accès à la page souhaitée.

C’est partit…

Le service d’authentification

Pour faire fonctionner votre custom Decorator, votre service d’authentification doit avoir une méthode qui retour true ou false en fonction de l’état d’authentification de l’utilisateur.

C’est cette méthode que l’on vas utiliser dans le custom Decorator pour connaitre l’état d’authentification de l’utilisateur.

Exemple:

// ./providers/auth-service/auth-service
....
isAuth():Observable<any>{
    return this.http.get(‘/api/isauth’);
}
isAuthenticated():boolean {
    let isAuthenticated:IAuthCheckedState = false ;
    this.isAuth().subscribe(isAuth => isAuthenticated = isAuth);
    return isAuthenticated  ;
}
....

Le Custom Decorator

Ensuite, nous allons créer notre custom Decorator dans un fichier.
et voici ce que nous allons écrire:

// ./src/decorators/index.ts
import { AuthService } from '../providers/auth-service/auth-service’;
export function canEnterIfAuthenticated(target:Function) {
  target.prototype.ionViewCanEnter = function () {
    this.isAuth = this.injector.get(AuthService).isAuthenticated()
    if(!this.isAuth){
      // do stuff or window.location.href = './'
    }
    return this.isAuth;
  }
}

Maintenant, il nous reste plus qu’a implémenter notre décorateur dans une page que l’on veux protégé.

Les pages à sécuriser avec le custom Decorator

Pour sécuriser une page Ionic, il faut simplement importer notre custom Decorator, ajouter @Inject de angular/core a notre Class et c’est tout.

// ./src/pages/home/home.ts

import { Inject } from '@angular/core’;
import { canEnterIfAuthenticated } from ‘../../decorators'

@canEnterIfAuthenticated
@IonicPage({
  name: 'HomePage',
  segment: 'index'
})
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(
    public injector: Injector // required to use @canEnterIfAuthenticated
  )
}

Rien de plus à ajouter. C’est cool non?

Mais que fait exactement ce décorateur… En fait, avec ce custom décorateur nous implémentons simplement une méthode de la Class de notre composent Angular/Ionic, c’est la méthode ionViewCanEnter() qui permet de bloquer l’accès à une page si on lui affect une valeur retour égale à false. (Doc Ionic: https://ionicframework.com/docs/api/router-outlet)

N.B: Sachez quand même que les exemples de code présenté sont fonctionnel avec Ionic V3 car depuis la version 4, la gestion des droits d’accès et de navigation peuvent et doivent être configurer depuis le routeur Angular avec la méthode des « Guards » (voir doc Angular Route Guard).
Je laisse néanmoins cet article en ligne car il explique très bien le fonctionnement et l’utilisation des Decorateurs Typescript.

Voilà. Rien de plus à dire. Je vous laisse quand même un lien avec les sources complètes (Ionic 3):
https://github.com/FazioNico/mean-ionic-ngrx/blob/master/src/decorators/index.ts
https://github.com/FazioNico/mean-ionic-ngrx/blob/master/src/pages/home/home.ts

Vous retrouverez tous les autres articles traitant du même sujet dans la section Programmation

Tu as besoin de support pour ton projet?
Je t’invite à te rendre sur le lien suivant pour définir ensemble une solution de support qui te convienne.