Composable : useFeatureFlagGuard — guide d'utilisation
title: “Composable : useFeatureFlagGuard — guide d’utilisation” lead: “Un composable client pour protéger pages et fonctionnalités côté client en s’appuyant sur les feature flags.” icon: “lucide:shield-check”
icon: “lucide:book-open” title: Pourquoi ce composable ? Le backend a été enrichi (middleware FeatureFlagGuardMiddleware et configuration des features) pour permettre des protections basées sur des feature flags. Ce composable frontend (useFeatureFlagGuard) complète cette logique côté client : il permet de masquer/rediriger/empêcher l’accès aux pages ou composants lorsque le flag correspondant est désactivé. Utilisez-le pour améliorer l’expérience utilisateur et éviter les flashes d’UI indésirables.
icon: “lucide:exclamation-triangle” title: À savoir (SSR & sécurité) Le composable protège l’interface côté client : il ne remplace pas la validation côté serveur. Pour empêcher l’accès aux routes API ou aux pages via URL directe, gardez la vérification côté serveur (FeatureFlagGuardMiddleware déjà modifié/ajouté). En SSR, assurez-vous que l’état des flags est hydraté côté client (par exemple via un payload initial ou injection depuis le serveur) pour éviter des comportements inattendus.
icon: “lucide:shield-off”
title: Exemple : composant wrapper
const { allowed, checking } = useFeatureFlagGuard({ flag: props.flag, redirectTo: props.redirectTo })
// Template :
//
//
icon: “lucide:exclamation-triangle” title: Tests et développement
- Dans les tests unitaires, mockez la source des flags (store, plugin featureFlags ou API) afin de contrôler allowed/checking.
- En dev, activez temporairement les flags dans config/features.php ou via l’interface d’administration pour tester les flux.
icon: “lucide:book-open” title: Besoin d’exemples supplémentaires ? desc: Indiquez l’emplacement où vous souhaitez intégrer le composable (route, layout, composant spécifique) et nous fournirons un snippet adapté.