52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
'use client'
|
||
|
||
import { useSession } from 'next-auth/react'
|
||
import { useRouter } from 'next/navigation'
|
||
import { useEffect, useState } from 'react'
|
||
|
||
interface AuthGuardProps {
|
||
children: React.ReactNode
|
||
}
|
||
|
||
export default function AuthGuard({ children }: AuthGuardProps) {
|
||
const { data: session, status } = useSession()
|
||
const router = useRouter()
|
||
const [isChecking, setIsChecking] = useState(true)
|
||
|
||
useEffect(() => {
|
||
if (status === 'loading') {
|
||
return // Ждем загрузки сессии
|
||
}
|
||
|
||
if (status === 'unauthenticated' || !session) {
|
||
console.log('[AuthGuard] Нет активной сессии, перенаправление на логин')
|
||
router.replace('/login')
|
||
return
|
||
}
|
||
|
||
if (status === 'authenticated' && session) {
|
||
console.log('[AuthGuard] Сессия активна, разрешаем доступ')
|
||
setIsChecking(false)
|
||
}
|
||
}, [session, status, router])
|
||
|
||
// Показываем загрузку пока проверяем аутентификацию
|
||
if (status === 'loading' || isChecking) {
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center">
|
||
<div className="flex flex-col items-center space-y-4">
|
||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-500 border-t-transparent"></div>
|
||
<p className="text-gray-600">Проверка аутентификации...</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Если нет сессии, не рендерим детей (будет перенаправление)
|
||
if (status === 'unauthenticated' || !session) {
|
||
return null
|
||
}
|
||
|
||
// Если все в порядке, рендерим детей
|
||
return <>{children}</>
|
||
} |