0Pricing
React Academy · Aula

Rotas protegidas e guardas de autenticação

Redirecione usuários não autenticados para o login usando componentes wrapper ou guardas baseados em carregadores.

Rotas protegidas e guardas de autenticação é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Por que proteger as rotas?

Algumas páginas (painel, perfil, administração) devem ser acessíveis apenas a usuários autenticados. O React Router oferece duas abordagens: componentes de encapsulamento e proteções baseadas em carregadores.

Estrutura do estado de autenticação

Primeiro, estabeleça um context de autenticação que os componentes possam consultar para saber se o usuário está conectado.

const AuthContext = React.createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const login = async (creds) => { const u = await apiLogin(creds); setUser(u); };
  const logout = () => setUser(null);
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

Proteção com componente de encapsulamento

Crie um componente PrivateRoute que verifique a autenticação e redirecione para login se o usuário não estiver autenticado.

import { Navigate, Outlet } from 'react-router-dom';

function PrivateRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

// Usage in router:
{ element: <PrivateRoute />, children: [
  { path: '/dashboard', element: <Dashboard /> },
]}

Preservando a URL de redirecionamento

Armazene a URL que foi tentada para poder enviar o usuário de volta após o login. Passe-a por meio de state no componente Navigate.

function PrivateRoute() {
  const { user } = useAuth();
  const location = useLocation();
  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return <Outlet />;
}

// In login handler:
const location = useLocation();
const from = location.state?.from?.pathname || '/';
navigate(from, { replace: true });

Proteção baseada em carregador (Data Router)

Na API Data Router, adicione uma verificação de autenticação ao loader da rota. Lance um redirecionamento se o usuário não estiver autenticado.

import { redirect } from 'react-router-dom';

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token) throw redirect('/login');
  return token;
}

const router = createBrowserRouter([
  {
    path: '/dashboard',
    loader: requireAuth,
    element: <Dashboard />,
  },
]);

Proteções baseadas em funções

Amplie a proteção para verificar funções. Redirecione para uma página de acesso não autorizado se o usuário não tiver a função necessária.

function AdminRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  if (user.role !== 'admin') return <Navigate to="/unauthorized" replace />;
  return <Outlet />;
}

Estado de carregamento durante a verificação de autenticação

Se o estado de autenticação for carregado de forma assíncrona (por exemplo, de um servidor), mostre um indicador de carregamento enquanto a verificação estiver pendente para evitar o aparecimento momentâneo da página de login.

function PrivateRoute() {
  const { user, isLoading } = useAuth();
  if (isLoading) return <Spinner />;
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

Protegendo várias rotas de uma só vez

Agrupe todas as rotas protegidas sob um único encapsulamento PrivateRoute para não repetir a proteção individualmente em cada rota.

const router = createBrowserRouter([
  { path: '/login', element: <Login /> },
  {
    element: <PrivateRoute />,
    children: [
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/profile', element: <Profile /> },
      { path: '/settings', element: <Settings /> },
    ],
  },
]);

Tratamento da expiração do token

Verifique a expiração do token dentro da proteção ou em um interceptor global e execute logout do usuário quando o token expirar, redirecionando-o para login.

function isTokenValid(token) {
  const payload = JSON.parse(atob(token.split('.')[1]));
  return payload.exp * 1000 > Date.now();
}

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token || !isTokenValid(token)) throw redirect('/login');
  return token;
}

Fluxo de atualização do token

Antes de redirecionar em caso de 401, tente atualizar o token. Redirecione para login somente se a atualização também falhar.

async function requireAuth() {
  let token = localStorage.getItem('token');
  if (!token || isExpired(token)) {
    token = await refreshToken();
    if (!token) throw redirect('/login');
    localStorage.setItem('token', token);
  }
  return token;
}

Persistindo a autenticação entre recarregamentos

Armazene o token de autenticação em localStorage ou em um cookie HttpOnly. Ao carregar o aplicativo, restaure o estado de autenticação antes de renderizar as rotas protegidas.

Verificação rápida

Ao usar uma proteção de autenticação baseada em carregador no React Router, o que você deve lançar para redirecionar um usuário não autenticado?

Recapitulação

Proteja as rotas com um encapsulamento PrivateRoute usando <Outlet /> ou um carregador que lance redirect(). Preserve a URL pretendida no estado de navegação, trate os estados de carregamento para evitar aparições momentâneas e agrupe as rotas protegidas para evitar duplicação.

Perguntas Frequentes

A aula “Rotas protegidas e guardas de autenticação” é grátis?

Sim — o texto completo de “Rotas protegidas e guardas de autenticação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Rotas protegidas e guardas de autenticação”?

Redirecione usuários não autenticados para o login usando componentes wrapper ou guardas baseados em carregadores. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Rotas protegidas e guardas de autenticação”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Rotas aninhadas e layouts com Outlet
  2. Carregadores e ações (API de roteador de dados)
  3. Rotas protegidas e guardas de autenticação
  4. Gerenciando estado nos parâmetros de busca da URL
← Voltar para React Academy