Rotas protegidas em React: saiba tudo sobre React Router e JWT

O que são rotas protegidas e por que você precisa delas?

• Segurança: informações sensíveis ficam protegidas, e ações críticas só podem ser executadas por quem tem permissão.

• Controle de acesso: é possível definir diferentes níveis de acesso. Por exemplo, um administrador vê mais opções que um usuário comum.

• Experiência do usuário: você guia cada pessoa de forma lógica, mostrando apenas o que faz sentido para o status dela (logada ou não), evitando confusão.

O que vamos construir?

• Página de login: pública, acessível a qualquer visitante.

• Página de dashboard: privada, acessível apenas após login (uma rota protegida).

Preparando o ambiente

Iniciando o projeto React com Vite

npm create vite@latest rotas-protegidas-react -- --template react
cd rotas-protegidas-react

Instalando as dependências: React Router DOM v7 e Axios

npm install react-router-dom@^7 axios

Estrutura de pastas recomendada

src/
├── contexts/      # Contexto de autenticação (AuthContext)
├── pages/         # Páginas da aplicação (LoginPage, DashboardPage)
├── routes/        # Configuração das rotas (PrivateRoute e AppRoutes)
└── services/      # Serviços de API e autenticação (authService, api)

A lógica da autenticação: nosso cofre de segurança com JWT

O que é JWT (JSON Web Token)?

Criando o serviço de autenticação (authService.js)

// src/services/authService.js
export const TOKEN_KEY = "@rocketseat-token";

// Verifica se já tem um token no localStorage (usuário logado)
export const isAuthenticated = () => localStorage.getItem(TOKEN_KEY) !== null;

// Pega o token do localStorage
export const getToken = () => localStorage.getItem(TOKEN_KEY);

// Salva o token (login)
export const login = (token) => {
  localStorage.setItem(TOKEN_KEY, token);
};

// Remove o token (logout)
export const logout = () => {
  localStorage.removeItem(TOKEN_KEY);
};

• TOKEN_KEY é a chave usada para salvar o JWT no localStorage.

• isAuthenticated() retorna true ou false dependendo se há token salvo — verifica se o usuário está logado.

• getToken() retorna o token (ou null se não houver).

• login(token) salva o token no armazenamento local.

• logout() remove o token e, assim, “desloga” o usuário.

Configurando o Axios com interceptors (api.js)

// src/services/api.js
import axios from "axios";
import { getToken } from "./authService";

const api = axios.create({
  baseURL: "https://sua-api.com/api", // ajuste para a sua API real
});

// Interceptor de requisições: adiciona o token JWT ao header Authorization, se existir
api.interceptors.request.use((config) => {
  const token = getToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default api;

Gerenciando o estado de autenticação com context API

Criando o nosso AuthContext

// src/contexts/AuthContext.jsx
import React, { createContext, useState, useEffect, useContext } from "react";
import { TOKEN_KEY } from "../services/authService";

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // Verifica se há token no localStorage quando a aplicação carrega
  useEffect(() => {
    const token = localStorage.getItem(TOKEN_KEY);
    if (token) {
      // Aqui você poderia validar o token com a API e obter os dados reais do usuário
      setUser({ name: "Diego" }); // usuário mockado para exemplo
    }
    setLoading(false);
  }, []);

  // Função de login
  const login = async (email, password) => {
    // Em produção: faça uma chamada à API de login e receba { token, user }
    const token = "jwt-token-de-exemplo";
    const loggedUser = { name: "Diego", email };

    localStorage.setItem(TOKEN_KEY, token);
    setUser(loggedUser);
  };

  // Função de logout
  const logout = () => {
    localStorage.removeItem(TOKEN_KEY);
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated: !!user, user, loading, login, logout }}
    >
      {children}
    </AuthContext.Provider>
  );
};

// Hook para acessar facilmente o contexto
export const useAuth = () => useContext(AuthContext);

• AuthContext armazena informações de autenticação (usuário, loading) e expõe funções de login e logout.

• AuthProvider envolve nossa aplicação, verificando inicialmente se existe um token no localStorage. Se existir, define um usuário mockado (em um projeto real, você validaria o token com a API e buscaria os dados do usuário). Após essa verificação, loading é definido como false.

• login(email, password) simula a chamada de API, salva o token e define os dados do usuário.

• logout() remove o token e reseta o usuário.

• Através do hook useAuth(), qualquer componente pode acessar isAuthenticated, user, loading, login e logout.

Mão na massa: construindo as rotas com React Router DOM

Criando o componente de Rota Privada (PrivateRoute.jsx)

// src/routes/PrivateRoute.jsx

import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";

const PrivateRoute = () => {
  const { isAuthenticated, loading } = useAuth();

  if (loading) {
    // Podemos retornar um spinner ou texto de carregando enquanto verifica o auth
    return <div>Carregando…</div>;
  }

  // Se estiver autenticado, renderiza o componente filho (Outlet);
  // Caso contrário, redireciona para login.
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
};

export default PrivateRoute;

• Obtemos isAuthenticated e loading via useAuth().

• Enquanto loading for true (a aplicação está verificando se existe token), exibimos algum indicador de carregamento.

• Depois, se o usuário estiver autenticado, renderizamos o <Outlet />, que representa a rota filha protegida; caso contrário, usamos <Navigate /> para redirecionar imediatamente para /login.

Estruturando o arquivo de rotas (AppRoutes.jsx)

// src/routes/AppRoutes.jsx
import React from "react";
import { Routes, Route } from "react-router-dom";
import LoginPage from "../pages/LoginPage";
import DashboardPage from "../pages/DashboardPage";
import PrivateRoute from "./PrivateRoute";

const AppRoutes = () => {
  return (
    <Routes>
      {/* Rota pública */}
      <Route path="/login" element={<LoginPage />} />
      {/* Wrapper de rotas privadas */}
      <Route path="/" element={<PrivateRoute />}>
        {/* Qualquer rota declarada aqui dentro só será acessível se o usuário estiver autenticado */}
        <Route path="/dashboard" element={<DashboardPage />} />
        {/* Adicione mais rotas privadas aqui, se precisar */}
      </Route>
      {/* 404 */}
      <Route path="*" element={<div>Página não encontrada!</div>} />
    </Routes>
  );
};

export default AppRoutes;

Extra (opcional): Data Router v7 com loaders e redirect

// src/routes/router.jsx (opcional)
import { createBrowserRouter, RouterProvider, redirect } from "react-router-dom";
import LoginPage from "../pages/LoginPage";
import DashboardPage from "../pages/DashboardPage";
import { getToken } from "../services/authService";

// Protege a rota usando loader
async function requireAuth() {
  const token = getToken();
  if (!token) throw redirect("/login");
  return null;
}

const router = createBrowserRouter([
  { path: "/login", element: <LoginPage /> },
  {
    path: "/",
    children: [
      { path: "/dashboard", element: <DashboardPage />, loader: requireAuth },
    ],
  },
]);

export const AppRouter = () => <RouterProvider router={router} />;

Construindo as páginas: a interface da nossa aplicação

Página de login (LoginPage.jsx)

// src/pages/LoginPage.jsx
import React, { useState } from "react";
import { useAuth } from "../contexts/AuthContext";
import { useNavigate } from "react-router-dom";

const LoginPage = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await login(email, password);      // autenticação JWT
      navigate("/dashboard");           // redireciona após login
    } catch (err) {
      console.error("Falha no login", err);
      alert("Credenciais inválidas. Tente novamente!");
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <input type="password"
          placeholder="Senha"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <button type="submit">Entrar</button>
      </form>
    </div>
  );
};

export default LoginPage;

1. Usa useState para controlar os campos de email e senha.

2. Usa useAuth() para pegar a função login do contexto.

3. Usa useNavigate() para redirecionar após o login.

4. No handleSubmit, impede o reload do formulário, chama login(email, password) e, em caso de sucesso, usa navigate('/dashboard') para levar a pessoa à rota protegida.

Página de dashboard (DashboardPage.jsx)

// src/pages/DashboardPage.jsx

import React from "react";
import { useAuth } from "../contexts/AuthContext";
import { useNavigate } from "react-router-dom";

const DashboardPage = () => {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate("/login");
  };

  return (
    <div>
      <h1>Dashboard</h1>
      <p>Bem-vindo(a), {user?.name || "dev"}!</p>
      <button onClick={handleLogout}>Sair</button>
    </div>
  );
};

export default DashboardPage;

Juntando todas as peças no App.jsx

// src/App.jsx
import React from "react";
import { BrowserRouter } from "react-router-dom";
import { AuthProvider } from "./contexts/AuthContext";
import AppRoutes from "./routes/AppRoutes";
// Se estiver usando a abordagem Data Router, importe AppRouter em vez de AppRoutes

function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <AppRoutes />
        {/* ou <AppRouter /> se usar o Data Router */}
      </AuthProvider>
    </BrowserRouter>
  );
}

export default App;

// src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Teste rápido (checklist)

1. Rode npm run dev e abra o projeto (tipicamente em http://localhost:5173).

2. Tente acessar http://localhost:5173/dashboard diretamente sem estar logado. Você deve ser redirecionado para /login.

3. Faça login com qualquer email e senha (estamos simulando). Você deve ser redirecionado para o dashboard.

4. Clique em Sair no dashboard para remover o token e voltar ao login.

Conclusão: suas rotas protegidas React estão prontas para decolar!