Les applications ont souvent besoin de restreindre l’accès à certaines fonctionnalités, en fonction de l’utilisateur. Par exemple, obliger l’utilisateur à s’authentifier pour accéder à son espace membre. Il faut alors bloquer ou limiter l’accès jusqu’à ce que l’utilisateur soit connecté.
Afin d’illustrer la mise en place de l’authentification, nous allons limiter l’accès à notre application de pokémons via un formulaire de connexion :
Mais pour cela, nous devons commencer par créer un service qui permettra à l’utilisateur de se connecter, et indiquer au reste de l’application si l’utilisateur est connecté ou non. Créez donc un nouveau service dédié à l’authentification dans le dossier services, nommé authentication-service.ts :
export default class AuthenticationService {
static isAuthenticated: boolean = false;
static login(username: string, password: string): Promise<boolean> {
const isAuthenticated = (username === 'pikachu' && password === 'pikachu');
return new Promise(resolve => {
setTimeout(() => {
this.isAuthenticated = isAuthenticated;
resolve(isAuthenticated);
}, 1000);
});
}
}
Alors que l’on pourrait s’attendre à un service très complexe ici, on peut s’étonner qu’il soit aussi court. C’est parce qu’il s’agit d’une version minimum de l’authentification, afin de mieux comprendre comment cela fonctionne. Libre à vous par la suite d’améliorer ce système, d’ailleurs je vous y encourage fortement. 😉
Mais revenons à nos explications. Ce service met à disposition plusieurs propriétés et méthodes :
On a maintenant un service d’authentification prêt à être utiliser. 👍
Cependant, avant de lancer l’application, nous devons encore faire deux choses :
Il ne s’agit pas d’une « vraie » connexion ici, mais cela permet de faire fonctionner notre application de démonstration. En revanche, nous avons vu tout ce qu’il faut pour construire une méthode d’authentification plus avancée pour vos utilisateurs, avec n’importe quelle API Rest, grâce aux chapitres précédents.