Echanges front/back

Cette page a été partiellement produite par l'IA.

1. Pourquoi JWT ?

Dans une architecture moderne :

• le front Vue.js gère l’interface utilisateur,

• le backend Symfony expose une API,

👉 On utilise donc un token transmis à chaque requête.

Le JWT (JSON Web Token) permet :

✅ authentification sans session ✅ API stateless ✅ séparation claire front / back ✅ compatibilité SPA / mobile / microservices

2. Principe global

Cycle complet

https://stackoverflow.com/questions/65351531/what-is-the-flow-of-using-jwt-work-on-the-frontend

Étapes

1️⃣ Login

Le front envoie :

{
  "email": "[e-mail]",
  "password": "secret"
}

2️⃣ Symfony vérifie

Si OK :

Symfony renvoie :

{
  "token": "eyJhbGciOiJIUzI1NiIsInR..."
}

3️⃣ Vue stocke le token

Dans :

• localStorage ou

• sessionStorage

4️⃣ Chaque appel API ajoute :

Authorization: Bearer eyJhbGciOiJIUzI1Ni...

5️⃣ Symfony vérifie le token

Si valide :

→ accès autorisé

---

3. Anatomie d’un JWT

Un JWT contient 3 parties :

HEADER.PAYLOAD.SIGNATURE

Exemple

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.KMUFsIDTnFmyG3nMiGM6H9FNFUROf3wh7SmqJp-QV30

Header

{
  "alg": "HS256",
  "typ": "JWT"
}

Payload

{
  "username": "[e-mail]",
  "exp": 1710000000
}

Signature

Permet de vérifier que le token n’a pas été modifié.

⚠️ Important :

Le payload est lisible.

👉 On ne met jamais :

❌ mot de passe ❌ données sensibles

4. Installation côté Symfony

---

Bundle recommandé

LexikJWTAuthenticationBundle

Installation

composer require lexik/jwt-authentication-bundle

Génération des clés

php bin/console lexik:jwt:generate-keypair

Cela crée :

config/jwt/private.pem
config/jwt/public.pem

Configuration .env (normalement déjà fait)

JWT_SECRET_KEY=%kernel.project_dir%/config/jwt/private.pem
JWT_PUBLIC_KEY=%kernel.project_dir%/config/jwt/public.pem
JWT_PASSPHRASE=monPassphrase

5. Configuration security.yaml

Partie principale (a adapter avec votre entité)

Faire make:user avant

security:
    password_hashers:
        Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface: 'auto'

    providers:
        app_user_provider:
            entity:
                class: App\Entity\User
                property: email

Adpater email pour correspondre à votre configuration symfony

Firewall login

firewalls:
    login:
        pattern: ^/api/login
        stateless: true
        json_login:
            check_path: /api/login
            username_path: email
            password_path: password
            success_handler: lexik_jwt_authentication.handler.authentication_success
            failure_handler: lexik_jwt_authentication.handler.authentication_failure

Adapter email et password qui sont les noms de vos champs venant du front

Firewall API

    api:
        pattern: ^/api
        stateless: true
        jwt: ~

Access control (exemple à adapter)

access_control:
    - { path: ^/api/login, roles: PUBLIC_ACCESS }
    - { path: ^/api, roles: ROLE_USER }

6. Installation côté Vue.js

Exemple avec Axios, la logique est identique avec fetch. Choisissez l'un ou l'autre.

Axios

Axios

npm install axios

7. Service API propre

api.js

Le service va éviter de penser a token à chaque appel.

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:8000/api'
})

export default api

8. Login Vue.js

Exemple Composition API

Ici api fait référence au fichier api.js écrit précédemment

import api from './api'

const login = async () => {
  const response = await api.post('/login', {
    email: email.value,
    password: password.value
  })

  localStorage.setItem('token', response.data.token)
}

9. Ajouter automatiquement le token

Interceptor Axios (à mettre dans api.js)

api.interceptors.request.use(config => {
  const token = localStorage.getItem('token')

  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }

  return config
})

10. Exemple appel protégé

const response = await api.get('/users/me')

Symfony reçoit :

Authorization: Bearer xxxx

12. Récupérer l’utilisateur connecté côté Symfony

---

#[Route('/api/me')]
public function me(): JsonResponse
{
    return $this->json($this->getUser());
}

13. Gestion expiration token

JWT contient :

exp

Si expiré :

Symfony renvoie :

401 Unauthorized

Côté Vue :

if (error.response.status === 401) {
  localStorage.removeItem('token')
}

14. Déconnexion

JWT ne se "détruit" pas côté serveur.

On fait :

localStorage.removeItem('token')

15. Architecture recommandée

---

src/
 ├── services/
 │    ├── api.js
 │    ├── auth.js
 │

16. Route guard Vue Router

Vue Router

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')

  if (to.meta.requiresAuth && !token) {
    next('/login')
  } else {
    next()
  }
})

Le fichier api.js complet

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:8000/api'
})

api.interceptors.request.use(config => {
  const token = localStorage.getItem('token')

  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }

  return config
})

export default api