🛡️ AuthGuard.js - Proteção de Rotas

O componente AuthGuard.js é responsável por proteger as rotas da aplicação, garantindo que apenas usuários autenticados possam acessá-las. Caso o usuário não esteja autenticado, ele será redirecionado automaticamente para a página de login.

🔍 Como funciona?

Verificação do Usuário: O componente utiliza o contexto UserContext para obter as informações do usuário e seu status de carregamento.
Redirecionamento: Se o usuário não estiver autenticado e o estado de carregamento já tiver finalizado, ele será redirecionado para a página de login.
Armazenamento do Redirecionamento: O caminho atual é salvo no localStorage para que, após o login, o usuário possa ser redirecionado de volta para a página que tentou acessar.

📝 Código Explicado

📌 Importação dos Hooks e Contexto

'use client'
import { useEffect } from 'react'
import { useRouter, usePathname } from 'next/navigation'
import { useUser } from '@/components/context/UserContext'

useEffect: Efeito colateral que executa a lógica de redirecionamento.
useRouter: Hook do Next.js para manipulação de rotas.
usePathname: Obtém o caminho atual da URL.
useUser: Obtém os dados do usuário a partir do contexto.

🔐 Lógica de Proteção de Rotas

export default function AuthGuard({ children }) {
  const { user, loading } = useUser()
  const router = useRouter()
  const pathname = usePathname()

user: Informações do usuário autenticado.
loading: Indica se os dados do usuário ainda estão sendo carregados.
router: Responsável pelo redirecionamento de rotas.
pathname: Armazena o caminho atual da página.

🔄 Efeito de Redirecionamento

  useEffect(() => {
    if (!loading && !user) {
      localStorage.setItem('redirectAfterLogin', pathname)
      router.push('/login')
    }
  }, [loading, user, router, pathname])

Condição: Se loading for false e user for null, o redirecionamento ocorre.
Armazenamento: O caminho da página atual é salvo no localStorage para posterior redirecionamento após o login.
Redirecionamento: router.push('/login') direciona o usuário para a página de login.

⏳ Tratamento de Carregamento

  if (loading) {
    return <div>Carregando...</div>
  }

Se os dados do usuário ainda estiverem sendo carregados, a mensagem "Carregando..." será exibida.

🚪 Bloqueio de Renderização para Usuários Não Autenticados

  if (!user) {
    return null
  }

Se o usuário não estiver autenticado, o componente retorna null, impedindo que a página seja renderizada.

✅ Renderização Condicional

  return <>{children}</>
}

Se o usuário estiver autenticado, o conteúdo da rota protegida será exibido normalmente.

🏁 Código Completo

'use client'
import { useEffect } from 'react'
import { useRouter, usePathname } from 'next/navigation'
import { useUser } from '@/components/context/UserContext'
 
export default function AuthGuard({ children }) {
  const { user, loading } = useUser()
  const router = useRouter()
  const pathname = usePathname()
 
  useEffect(() => {
    if (!loading && !user) {
      localStorage.setItem('redirectAfterLogin', pathname)
      router.push('/login')
    }
  }, [loading, user, router, pathname])
 
  if (loading) {
    return <div>Carregando...</div>
  }
 
  if (!user) {
    return null
  }
 
  return <>{children}</>
}

📌 Conclusão

O AuthGuard.js garante que apenas usuários autenticados possam acessar determinadas páginas da aplicação. Caso contrário, eles são redirecionados para a página de login e, após a autenticação, retornam automaticamente ao caminho original. 🔄🔐

AppSidebar.jsx AvatarUpload.jsx