🚀 Capítulo 14: Guardas - Segurança

🎯 Objetivo da Aula

Ao final desta aula, você saberá como proteger páginas específicas da sua aplicação React, impedindo que usuários não autorizados acessem rotas restritas (como uma área administrativa ou secreta).

---

🏢 O Cenário Prático (Seu Desafio)

A rota do Quartel General contém planos secretos para destruir a Estrela da Morte! Seu desafio hoje é criar um sistema de segurança que verifique se o usuário é um “Mestre Jedi”. Se não for, ele deve ser barrado e mandado de volta para o Painel!

---

🧠 Fundamentos: A Teoria Traduzida

Diferente do Angular, o React Router não tem “Guards” prontos de fábrica. No React, nós usamos componentes comuns para fazer esse papel.

Nós criamos um componente chamado (geralmente) de Rota Privada (PrivateRoute). Ele funciona assim:

1. Ele recebe a página que o usuário quer acessar.
2. Ele verifica se o usuário está logado ou tem permissão.
3. Se sim, ele deixa a página carregar.
4. Se não, ele usa o componente <Navigate to="/" /> para jogar o usuário para outra página.

---

📖 Exemplo Guiado: Protegendo o QG

Vamos criar a nossa rota protegida.

🛠️ Passo a Passo

Abra o arquivo src/App.jsx e crie o componente de guarda:

import { BrowserRouter, Routes, Route, Link, Navigate } from 'react-router-dom';
 
// Simulação de autenticação
const isJedi = false; // Mude para true para testar o acesso!
 
// Nosso componente de Guarda
function RotaProtegida({ children }) {
  if (!isJedi) {
    alert('Acesso negado! Apenas Mestres Jedi.');
    return <Navigate to="/" />; // Redireciona para a home
  }
  return children; // Deixa entrar
}
 
function Painel() { return <h2>🎛️ Painel Público</h2>; }
function QGSecreto() { return <h2>🏰 Quartel General Secreto</h2>; }
 
function App() {
  return (
    <BrowserRouter>
      <div>
        <h1>🛡️ Sistema de Segurança</h1>
        <nav>
          <Link to="/">Painel</Link> | <Link to="/qg">QG Secreto</Link>
        </nav>
 
        <Routes>
          <Route path="/" element={<Painel />} />
          
          {/* Envolvemos a rota do QG com o nosso guarda */}
          <Route path="/qg" element={
            <RotaProtegida>
              <QGSecreto />
            </RotaProtegida>
          } />
        </Routes>
      </div>
    </BrowserRouter>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve e execute o projeto.
2. Com isJedi = false, clique no link “QG Secreto”. Você verá o alerta e continuará na mesma página!
3. Mude a variável no código para true, salve e tente de novo. Agora você conseguirá entrar!

---

🛠️ Prática Obrigatória 1

Transforme a variável isJedi em um Estado (useState) no componente App e crie um botão “Fazer Login como Jedi” que muda esse estado para true.

---

🛠️ Prática Obrigatória 2

Passe esse estado e a função de mudar o estado para o componente RotaProtegida via props, para que o sistema funcione dinamicamente sem você precisar mudar o código manualmente.

---

🔑 Gabarito de Código/Fórmulas

Prática 1 e 2:

No App.jsx:

const [isJedi, setIsJedi] = useState(false);
 
// ...
<button onClick={() => setIsJedi(true)}>Fazer Login</button>
 
// Na RotaProtegida:
function RotaProtegida({ children, logado }) {
  if (!logado) {
    return <Navigate to="/" />;
  }
  return children;
}
 
// Nas Routes:
<Route path="/qg" element={
  <RotaProtegida logado={isJedi}>
    <QGSecreto />
  </RotaProtegida>
} />

---

← Capitulo Anterior | Proximo Capitulo →