.
Rotas protegidas são rotas que permitem acesso apenas a usuários autorizados. Isso significa que os usuários devem primeiro atender a certas condições antes de acessar essa rota específica. Isso é essencial para proteger certas rotas ou informações. Existem várias maneiras de usar rotas protegidas no React. Uma delas é usar um componente de ordem superior que envolve uma rota protegida e verifica se um usuário está autenticado antes de renderizar um componente.
Criando um aplicativo React
Antes de criar a rota protegida, você precisará criar um aplicativo React.
Execute o comando abaixo para usar a ferramenta de comando create-react-app para inicializar o aplicativo.
npx create-react-app protect-routes-react
O criar-reagir-aplicativo comando irá criar uma pasta chamada proteger-rotas-reagir contendo todos os arquivos e pacotes necessários para começar.
Navegue até a pasta e execute npm start para iniciar o aplicativo.
cd protect-routes-react
npm start
Abra a pasta do aplicativo com o editor de texto de sua preferência e modifique App.js para que ele contenha apenas o código a seguir.
function App() {
return <div></div>;
}
export default App;
Agora você está pronto para configurar as rotas.
Configurando o roteador React
Execute o comando npm abaixo no terminal para instalar react-router-dom.
npm install react-router-dom
Neste aplicativo, você criará três páginas principais:
- Página inicial (a página de destino).
- Página de perfil (protegida, portanto, apenas usuários logados têm acesso).
- Página Sobre (pública para que qualquer pessoa possa acessá-la).
Para começar, crie um componente chamado Navbar.js. Este componente conterá os links de navegação para as três páginas.
Neste arquivo, importe o Link componente de react-router-dom e adicione os links.
const { Link } = require("react-router-dom");
const Navbar = () => {
return (
<nav style={{ textAlign: "center", marginTop: "20px" }}>
<Link to="https://www.makeuseof.com/" style={{ padding: "10px" }}>
Home
</Link>
<Link to="/profile" style={{ padding: "10px" }}>
Profile
</Link>
<Link to="/about" style={{ padding: "10px" }}>
About
</Link>
</nav>
);
};
export default Navbar;
Depois de criar os links, crie as rotas correspondentes em App.js.
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./Navbar";
import Home from "./Home";
import Profile from "./Profile";
import About from "./About";
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="https://www.makeuseof.com/" element={<Home />} />
<Route path="/profile" element={<Profile />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;
Em seguida, crie os componentes aos quais você fez referência em App.js.
Em Home.js adicione o seguinte código para criar a página inicial.
const Home = () => {
return <h1>Home page</h1>;
};
export default Home;
Em Profile.js adicione o seguinte código para criar a página de perfil.
const Profile = () => {
return <h1 style={{ textAlign: "center" }}>Profile Page</h1>;
};
export default Profile;
Finalmente, em Sobre.jsadicione o código a seguir para criar a página sobre.
const About = () => {
return <h1 style={{ textAlign: "center" }}>About page</h1>;
};
export default About;
Depois de criar as páginas, você pode criar as rotas protegidas.
Criando Rotas Protegidas no React
O /lar e /sobre rotas são rotas públicas, o que significa que qualquer pessoa pode acessá-las, mas apenas usuários autenticados podem acessar a rota do perfil. Você, portanto, precisa de uma maneira de fazer login como usuário.
Configurando autenticação falsa
Como este não é um tutorial de autenticação, você usará o React useState gancho para simular um sistema de login.
Em App.jsadicione o seguinte.
import { Routes, Route, BrowserRouter } from "react-router-dom";
import { useState } from "react";
<em>
function App() {
const [isLoggedIn, setisLoggedIn] = useState(null);
const logIn = () => {
setisLoggedIn(true);
};
const logOut = () => {
setisLoggedIn(false);
};
return (
<BrowserRouter>
<Navbar />
{isLoggedIn ? (
<button onClick={logOut}>Logout</button>
) : (
<button onClick={logIn}>Login</button>
)}
<Routes>
</Routes>
</BrowserRouter>
);
}
export default App;
Aqui, você está rastreando o status de login do usuário usando o estado. Você tem dois botões, o botão de login e o botão de logout. Esses botões são renderizados dependendo se o usuário está conectado ou não.
Se o usuário estiver desconectado, o botão de login será exibido. Clicar nele acionará a função de login que atualizará o isLoggedIn estado para verdadeiro e, por sua vez, a exibição do botão de login até o botão de logout.
Protegendo Componentes Privados
Para proteger as rotas, os componentes privados também devem ter acesso ao isLoggedIn valor. Você pode criar um novo componente que aceita o isLoggedIn estado como um suporte e o componente privado como um filho.
Por exemplo, se seu novo componente for nomeado Protegidovocê renderizaria um componente privado agrupando-o assim:
<Protected isLoggedIn={isLoggedIn}>
<Private />
</Protected>
O Protegido componente irá verificar se isLoggedIn é verdadeiro ou falso. Se for verdade, ele irá em frente e retornará o Privado componente. Se for falso, ele redirecionará o usuário para uma página onde ele poderá fazer login.
Saiba mais sobre outras maneiras que você pode usar para renderizar um componente dependendo das condições deste artigo sobre renderização condicional no React.
Em seu aplicativo, crie um arquivo chamado Protected.js e adicione o seguinte código.
import { Navigate } from "react-router-dom";
const Protected = ({ isLoggedIn, children }) => {
if (!isLoggedIn) {
return <Navigate to="https://www.makeuseof.com/" replace />;
}
return children;
};
export default Protected;
Nesse componente, a instrução if é usada para verificar se o usuário está autenticado. Se não forem, Navegar de react-router-dom redireciona-os para a página inicial. No entanto, se o usuário for autenticado, o componente renderizará os filhos.
Para proteger o Perfil rota, envolva-a com o Protegido rota e passagem no isLoggedIn estado como um prop.
<Route
path="/profile"
element={
<Protected isLoggedIn={isLoggedIn}>
<Profile />
</Protected>
}
/>
O componente App agora deve ter esta aparência.
import { Routes, Route, BrowserRouter } from "react-router-dom";
import { useState } from "react";
import Navbar from "./Navbar";
import Protected from "./Protected";
import Home from "./Home";
import About from "./About";
import Profile from "./Profile";
function App() {
const [isLoggedIn, setisLoggedIn] = useState(null);
const logIn = () => {
setisLoggedIn(true);
};
const logOut = () => {
setisLoggedIn(false);
};
return (
<BrowserRouter>
<div>
<Navbar />
{isLoggedIn ? (
<button onClick={logOut}>Logout</button>
) : (
<button onClick={logIn}>Login</button>
)}
<Routes>
<Route path="https://www.makeuseof.com/" element={<Home />} />
<Route path='/profile'
element={
<Protected isLoggedIn={isLoggedIn}>
<Profile />
</Protected>
}
/>
<Route path ='/about' element={<About />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
É isso na criação de rotas protegidas. Agora você pode acessar a página de perfil apenas se estiver logado. Se tentar navegar para a página de perfil sem fazer login, você será redirecionado para a página inicial.
Controle de acesso baseado em função
As rotas protegidas no React ajudam a restringir o acesso de usuários não autenticados a uma página. Isso é muito básico e, em alguns casos, pode ser necessário ir ainda mais longe e restringir os usuários com base em suas funções. Por exemplo, você pode ter uma página, digamos, uma página de análise que conceda acesso apenas aos administradores. Aqui, você precisará adicionar lógica no Protegido componente para verificar se um usuário precisa acessar essa rota com base em sua função.
.
