fix: Update PrimeReact and fix all compilation errors
This commit is contained in:
92
components/ProtectedLayout.tsx
Normal file → Executable file
92
components/ProtectedLayout.tsx
Normal file → Executable file
@@ -3,8 +3,8 @@
|
||||
import React from 'react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import LoadingSpinner from './ui/LoadingSpinner';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { useRouter, useSearchParams, usePathname } from 'next/navigation';
|
||||
import { useEffect, useRef, useMemo } from 'react';
|
||||
|
||||
interface ProtectedLayoutProps {
|
||||
children: React.ReactNode;
|
||||
@@ -12,29 +12,55 @@ interface ProtectedLayoutProps {
|
||||
requiredPermissions?: string[];
|
||||
}
|
||||
|
||||
const ProtectedLayout: React.FC<ProtectedLayoutProps> = ({
|
||||
children,
|
||||
requiredRoles = [],
|
||||
requiredPermissions = []
|
||||
const ProtectedLayout: React.FC<ProtectedLayoutProps> = ({
|
||||
children,
|
||||
requiredRoles = [],
|
||||
requiredPermissions = []
|
||||
}) => {
|
||||
const { isAuthenticated, isLoading, user, hasRole, hasPermission } = useAuth();
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const pathname = usePathname();
|
||||
const redirectedRef = useRef(false);
|
||||
|
||||
// Vérifier s'il y a un code d'autorisation dans l'URL
|
||||
// Utiliser useMemo pour éviter les re-rendus inutiles
|
||||
const hasAuthCode = useMemo(() => {
|
||||
return searchParams.get('code') !== null && pathname === '/dashboard';
|
||||
}, [searchParams, pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && !isAuthenticated) {
|
||||
// Ne pas rediriger si on est en train de traiter un code d'autorisation
|
||||
const currentUrl = window.location.href;
|
||||
const hasAuthCode = currentUrl.includes('code=') && currentUrl.includes('/dashboard');
|
||||
console.log('🔍 ProtectedLayout useEffect:', {
|
||||
isLoading,
|
||||
isAuthenticated,
|
||||
hasAuthCode,
|
||||
pathname,
|
||||
redirected: redirectedRef.current
|
||||
});
|
||||
|
||||
if (!hasAuthCode) {
|
||||
// Rediriger vers la page de connexion avec l'URL de retour
|
||||
const currentPath = window.location.pathname + window.location.search;
|
||||
window.location.href = `/api/auth/login?redirect=${encodeURIComponent(currentPath)}`;
|
||||
} else {
|
||||
console.log('🔄 ProtectedLayout: Redirection ignorée car authentification en cours...');
|
||||
}
|
||||
// Ne rediriger qu'une seule fois pour éviter les boucles
|
||||
if (redirectedRef.current) {
|
||||
console.log('⏭️ ProtectedLayout: Redirection déjà effectuée, skip');
|
||||
return;
|
||||
}
|
||||
}, [isAuthenticated, isLoading, router]);
|
||||
|
||||
if (!isLoading && !isAuthenticated && !hasAuthCode) {
|
||||
// Marquer comme redirigé pour éviter les boucles
|
||||
redirectedRef.current = true;
|
||||
|
||||
// Rediriger vers la page de connexion avec l'URL de retour
|
||||
const searchParamsStr = searchParams.toString();
|
||||
const currentPath = pathname + (searchParamsStr ? `?${searchParamsStr}` : '');
|
||||
console.log('🔒 ProtectedLayout: Redirection vers /api/auth/login');
|
||||
window.location.href = `/api/auth/login?redirect=${encodeURIComponent(currentPath)}`;
|
||||
} else if (hasAuthCode) {
|
||||
console.log('🔓 ProtectedLayout: Code d\'autorisation détecté, pas de redirection');
|
||||
} else if (isAuthenticated) {
|
||||
console.log('✅ ProtectedLayout: Utilisateur authentifié, pas de redirection');
|
||||
} else if (isLoading) {
|
||||
console.log('⏳ ProtectedLayout: Chargement en cours, pas de redirection');
|
||||
}
|
||||
}, [isAuthenticated, isLoading, hasAuthCode, pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && user) {
|
||||
@@ -72,25 +98,19 @@ const ProtectedLayout: React.FC<ProtectedLayoutProps> = ({
|
||||
|
||||
// Si pas authentifié, vérifier s'il y a un code d'autorisation en cours
|
||||
if (!isAuthenticated) {
|
||||
// Si on a un code d'autorisation, laisser le composant se charger pour traiter l'authentification
|
||||
if (typeof window !== 'undefined') {
|
||||
const currentUrl = window.location.href;
|
||||
const hasAuthCode = currentUrl.includes('code=') && currentUrl.includes('/dashboard');
|
||||
|
||||
if (hasAuthCode) {
|
||||
console.log('🔓 ProtectedLayout: Autorisant le rendu car code d\'autorisation présent');
|
||||
// Laisser le composant se charger pour traiter l'authentification
|
||||
} else {
|
||||
// Pas de code d'autorisation, afficher le message de redirection
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<LoadingSpinner size="large" />
|
||||
<p className="mt-4 text-gray-600">Redirection vers la connexion...</p>
|
||||
</div>
|
||||
if (hasAuthCode) {
|
||||
console.log('🔓 ProtectedLayout: Autorisant le rendu car code d\'autorisation présent');
|
||||
// Laisser le composant se charger pour traiter l'authentification
|
||||
} else {
|
||||
// Pas de code d'autorisation, afficher le message de redirection
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<LoadingSpinner size="large" />
|
||||
<p className="mt-4 text-gray-600">Redirection vers la connexion...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user