Pourquoi Authentification dans Vue ?
L'authentification est un aspect crucial des applications modernes, et Vue.js, avec son écosystème robuste, offre des outils puissants pour gérer cette fonctionnalité de manière efficace et sécurisée. Dans ce tutoriel, nous allons explorer comment implémenter une authentification complète dans un projet Vue.js.
Contexte réel : pourquoi un dev a besoin de ca au quotidien
En tant que développeur backend, vous êtes certainement familiarisé avec le processus d'authentification et d'autorisation. Pour les applications web frontend qui interagissent avec des services backend protégés, l'authentification est indispensable pour :
- Sécurité : Assurer que seuls les utilisateurs autorisés accèdent aux ressources sensibles.
- Exérience utilisateur : Offrir une authentification fluide et intuitive pour une meilleure expérience utilisateur.
- Compliance : Satisfaire les réglementations de sécurité et la confidentialité.
Un cas d'usage concret en 2-3 phrases
Imaginez un site de gestion des tâches personnelles. Vous souhaitez que chaque utilisateur puisse se connecter à son compte pour voir ses tâches, les modifier et les partager avec d'autres utilisateurs. L'authentification est essentielle pour :
- Protéger les données personnelles des utilisateurs.
- Permettre une gestion细粒度de l'accès aux ressources.
Prerequis
Avant de commencer ce tutoriel, vous devrez avoir les compétences et les outils suivants :
Connaissances nécessaires
- Vue.js : Une compréhension de base des concepts de Vue.js.
- JavaScript : Notamment ES6+.
- APIs REST : Pour interagir avec le backend.
- JWT (JSON Web Tokens) : Pour la gestion de l'authentification.
Outils à installer
Node.js et npm
Pour créer et gérer les projets Vue, vous aurez besoin de Node.js et npm. Vous pouvez les installer depuis nodejs.org.
## Vérifiez la version installée
node -v
npm -v
Vue CLI
Vue CLI est un outil de ligne de commande pour créer des projets Vue.js.
## Installez Vue CLI globalment
npm install -g @vue/cli
Concepts fondamentaux
Composants clés de l'authentification dans Vue.js
- Login Form
- Auth Guard
- JWT Management
1. Login Form
Le formulaire de connexion permet à l'utilisateur d'entrer ses identifiants et de soumettre la requête d'authentification.
<template>
<div>
<h2>Se connecter</h2>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Nom d'utilisateur" required />
<input type="password" v-model="password" placeholder="Mot de passe" required />
<button type="submit">Se connecter</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async login() {
try {
const response = await this.$axios.post('/api/login', {
username: this.username,
password: this.password
});
const token = response.data.token;
localStorage.setItem('token', token);
this.$router.push('/');
} catch (error) {
console.error('Erreur lors de la connexion:', error);
}
}
}
};
</script>
2. Auth Guard
Un guard authentifie les routes pour s'assurer que seul un utilisateur authentifié peut accéder à certaines parties de l'application.
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/',
component: Home,
meta: { requiresAuth: true }
},
{
path: '/login',
component: Login
}
]
});
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!token) {
next({
path: '/login'
});
} else {
next();
}
} else {
next();
}
});
export default router;
3. JWT Management
La gestion des tokens JSON Web Tokens permet de vérifier l'authenticité et l'autorisation de l'utilisateur.
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://localhost:3000'
});
instance.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});
export default instance;
Mise en pratique : projet fil rouge
Nous allons construire un mini-projet complet et réaliste, un gestionnaire de tâches personnelles avec authentification.
Étape 1 : Créer le projet Vue.js
## Créez un nouveau projet Vue.js
vue create task-manager
## Choisissez "Manuel" pour personnaliser les packages à installer
## Sélectionnez "Babel", "Router", et "Vuex"
cd task-manager
Étape 2 : Créer le composant Login
<template>
<div>
<h2>Se connecter</h2>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="Nom d'utilisateur" required />
<input type="password" v-model="password" placeholder="Mot de passe" required />
<button type="submit">Se connecter</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async login() {
try {
const response = await this.$axios.post('/api/login', {
username: this.username,
password: this.password
});
const token = response.data.token;
localStorage.setItem('token', token);
this.$router.push('/');
} catch (error) {
console.error('Erreur lors de la connexion:', error);
}
}
}
};
</script>
Étape 3 : Configurer les routes
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/',
component: Home,
meta: { requiresAuth: true }
},
{
path: '/login',
component: Login
}
]
});
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!token) {
next({
path: '/login'
});
} else {
next();
}
} else {
next();
}
});
export default router;
Étape 4 : Créer le composant Home
<template>
<div>
<h2>Bienvenue sur votre gestionnaire de tâches</h2>
<ul>
<li v-for="task in tasks" :key="task.id">
task.title - task.description
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
tasks: []
};
},
created() {
this.fetchTasks();
},
methods: {
async fetchTasks() {
try {
const response = await this.$axios.get('/api/tasks');
this.tasks = response.data;
} catch (error) {
console.error('Erreur lors de la récupération des tâches:', error);
}
}
}
};
</script>
Étape 5 : Configurer Axios
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://localhost:3000'
});
instance.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});
export default instance;
Étape 6 : Lancer le serveur
Assurez-vous que votre backend est en cours d'exécution et que l'API /api/login et /api/tasks sont disponibles.
npm run serve
Erreurs fréquentes et debugging
1. Erreur de connexion
Message d'erreur :
TypeError: Cannot read property 'then' of undefined
Code incorrect :
this.$axios.post('/api/login', {
username: this.username,
password: this.password
});
Code correct :
try {
const response = await this.$axios.post('/api/login', {
username: this.username,
password: this.password
});
const token = response.data.token;
localStorage.setItem('token', token);
this.$router.push('/');
} catch (error) {
console.error('Erreur lors de la connexion:', error);
}
2. Erreur d'autorisation
Message d'erreur :
401 Unauthorized
Code incorrect :
this.$axios.get('/api/tasks');
Code correct :
try {
const response = await this.$axios.get('/api/tasks');
this.tasks = response.data;
} catch (error) {
console.error('Erreur lors de la récupération des tâches:', error);
}
3. Erreur de token
Message d'erreur :
Invalid JWT
Code incorrect :
localStorage.setItem('token', 'invalid_token');
Code correct :
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
Pour aller plus loin
Role-Based Access Control (RBAC) : Apprenez comment gérer différents niveaux d'accès pour les utilisateurs.
Refresh Tokens : Implémentez des tokens de rafraîchissement pour une meilleure sécurité.
Social Login : Ajoutez des options de connexion avec les comptes sociaux (Google, Facebook).
Défi pratique
Implémentez une fonctionnalité pour ajouter et supprimer des tâches. Assurez-vous que l'authentification est toujours respectée et que seuls les utilisateurs autorisés peuvent effectuer ces actions.