Affichage : Faire disparaitre des liens lorsque l’utilisateur est connecté

Liens qui disparaissent lorsque l’utilisateur est connecté avec la directive @guest

Laravel propose une directive Blade très utile appelée @guest, qui permet d’afficher du contenu uniquement pour les utilisateurs non connectés. Cela signifie que les liens comme « Inscription » ou « Connexion » disparaissent automatiquement lorsque l’utilisateur est authentifié.

1. Qu’est-ce que @guest ?

• @guest vérifie si un utilisateur n’est pas connecté (non authentifié).
• Tout contenu placé entre @guest et @endguest sera affiché uniquement si l’utilisateur est un invité (non connecté).

2. Exemple Simple

Voici un exemple d’affichage conditionnel d’un lien d’inscription dans une vue Blade :

Code :

blade

@guest <a href="{{ route('register') }}" class="text-blue-500 hover:underline">Inscription</a> @endguest

Explications :

• @guest : Vérifie si l’utilisateur est un invité.
• route('register') : Génère l’URL pour la page d’inscription.
• Si l’utilisateur est connecté, ce lien ne sera pas visible.

3. Exemple dans une Navigation

Une situation courante est d’utiliser @guest pour afficher des liens comme « Connexion » et « Inscription » uniquement pour les invités, et d’afficher des liens comme « Tableau de Bord » pour les utilisateurs connectés.

Code dans nav.blade.php :

blade

<nav class="bg-gray-800 text-white py-2"> <div class="container mx-auto flex justify-between items-center"> <ul class="flex space-x-4"> <li><a href="{{ url('/') }}" class="hover:text-yellow-400">Accueil</a></li> <li><a href="{{ url('/about') }}" class="hover:text-yellow-400">À propos</a></li> <li><a href="{{ url('/contact') }}" class="hover:text-yellow-400">Contact</a></li> <!-- Lien visible uniquement pour les invités --> @guest <li><a href="{{ route('login') }}" class="hover:text-yellow-400">Connexion</a></li> <li><a href="{{ route('register') }}" class="hover:text-yellow-400">Inscription</a></li> @endguest <!-- Lien visible uniquement pour les utilisateurs connectés --> @auth <li><a href="{{ url('/dashboard') }}" class="hover:text-yellow-400">Tableau de Bord</a></li> @endauth </ul> </div> </nav>

4. Gestion Dynamique : Liens qui Disparaissent

Avec ce code, le comportement des liens devient dynamique :

• Si l’utilisateur est invité (non connecté) :
  • Les liens « Connexion » et « Inscription » sont visibles.
  • Le lien « Tableau de Bord » est masqué.
• Si l’utilisateur est connecté :
  • Les liens « Connexion » et « Inscription » disparaissent.
  • Le lien « Tableau de Bord » devient visible.

5. Exemple Complet avec Affichage du Nom de l’Utilisateur

Dans la navigation, vous pouvez également afficher le nom de l’utilisateur connecté et masquer les liens d’inscription et de connexion.

Code :

blade

<nav class="bg-gray-800 text-white py-2"> <div class="container mx-auto flex justify-between items-center"> <ul class="flex space-x-4"> <li><a href="{{ url('/') }}" class="hover:text-yellow-400">Accueil</a></li> <li><a href="{{ url('/about') }}" class="hover:text-yellow-400">À propos</a></li> <li><a href="{{ url('/contact') }}" class="hover:text-yellow-400">Contact</a></li> <!-- Liens pour les invités --> @guest <li><a href="{{ route('login') }}" class="hover:text-yellow-400">Connexion</a></li> <li><a href="{{ route('register') }}" class="hover:text-yellow-400">Inscription</a></li> @endguest <!-- Liens pour les utilisateurs connectés --> @auth <li>Bienvenue, {{ auth()->user()->name }}</li> <li><a href="{{ url('/dashboard') }}" class="hover:text-yellow-400">Tableau de Bord</a></li> <li> <form method="POST" action="{{ route('logout') }}"> @csrf <button type="submit" class="hover:text-red-500">Déconnexion</button> </form> </li> @endauth </ul> </div> </nav>

6. Configuration des Routes

Assurez-vous que vos routes sont configurées pour que les pages de connexion, inscription et tableau de bord fonctionnent correctement.

Exemple dans routes/web.php :

php

use Illuminate\Support\Facades\Route; // Page d'accueil Route::get('/', function () { return view('welcome'); }); // Tableau de bord protégé Route::get('/dashboard', function () { return view('dashboard'); })->middleware(['auth']); // Protège cette route pour les utilisateurs connectés // Authentification via Laravel Breeze ou Jetstream require __DIR__.'/auth.php';

7. Points de Debugging

1. Vérifiez les migrations et la table users : Assurez-vous que votre base de données contient une table users et que les utilisateurs peuvent s’authentifier.

   bash

   php artisan migrate

2. Vérifiez les erreurs dans la console : Si les liens ne s’affichent pas comme prévu, inspectez les erreurs dans le terminal ou dans les outils de développement du navigateur (F12).
3. Testez les états connectés et déconnectés :
   • Déconnectez-vous pour tester les liens « Connexion » et « Inscription ».
   • Connectez-vous pour tester le lien « Tableau de Bord ».

Avec ce code, vous obtenez une navigation intuitive et dynamique :

• Les invités voient les options de connexion et inscription.
• Les utilisateurs connectés accèdent au tableau de bord, voient leur nom affiché, et peuvent se déconnecter.

Cette implémentation utilise efficacement @guest et @auth pour gérer l’état d’authentification, tout en maintenant une structure propre et claire.