As rotas protegidas são aquelas que concedem 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. Por exemplo, seu aplicativo pode exigir que apenas usuários logados possam visitar a página do painel.

Neste tutorial, você aprenderá como criar rotas protegidas em um aplicativo React.

Observe que você usará o React Router v6, que é um pouco diferente das versões anteriores.

Começando

Para começar, use criar-reagir-aplicativo para inicializar um aplicativo React simples.

npx create-react-app protect-routes-react

Navegue até a pasta que acabou de ser criada e inicie seu aplicativo.

cd proteger-rotas-reagir
npm início

Abra a pasta do seu aplicativo com seu editor de texto preferido e limpe-o. Seu app.js deve ficar assim.

função App() {
 Retorna ;
}
exportar aplicativo padrão;

Agora você está pronto para configurar as rotas.

Relacionado: Como criar seu primeiro aplicativo React com JavaScript

Configurando o roteador React

Você usará o React Router para configurar a navegação para seu aplicativo.

Instalar react-router-dom.

npm instala react-router-dom

Para esta aplicação, você terá três páginas principais:

• Página inicial (a página de destino).
• Página de perfil (protegida, para que apenas usuários logados tenham acesso).
• Sobre a página (pública para que qualquer pessoa possa acessá-la).

Dentro Navbar.js, use o Link componente de react-router-dom para criar os links de navegação para vários caminhos.

const { Link } = require("react-router-dom");
barra de navegação const = () => {
 Retorna (

 );
};
exportar barra de navegação padrão;

Dentro app.js crie as rotas correspondentes aos links no menu de navegação.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
importar Navbar de "./Navbar";
importar Home de "./Home";
importar Perfil de "./Perfil";
importar Sobre de "./Sobre";
função App() {
 Retorna (



} />
} />
} />


 );
}
exportar aplicativo padrão;

Agora você precisa criar os componentes que você fez referência em UMApp.js.

Dentro Home.js:

const Início = () => {
 Retorna 
Pagina inicial
;
};
exportar padrão inicial;

Dentro Perfil.js

const Perfil = () => {
 Retorna 
Página de perfil
;
};
exportar perfil padrão;

Dentro Sobre.js

const Sobre = () => {
 Retorna 
Sobre a página
;
};
exportar padrão Sobre;

Criando Rotas Protegidas no React

O próximo passo é criar rotas protegidas. O casa e cerca de as rotas são públicas, o que significa que qualquer pessoa pode acessá-las, mas a rota do perfil exige que os usuários sejam autenticados primeiro. Portanto, você precisa criar uma maneira de fazer login de usuários.

Configurando a autenticação falsa

Como este não é um tutorial de autenticação, você usará o React gancho useState para simular um sistema de login.

Dentro UMApp.js, adicione o seguinte.

import { Routes, Route, BrowserRouter } de "react-router-dom";
import { useState } de "reagir";
// Outros estamentos de importação
função App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (verdadeiro);
 };
 const logOut = () => {
 setisLoggedIn (falso);
 };
 Retorna (


 {está logado? (
Sair
 ): (
Conecte-se
 )}



 );
}
exportar aplicativo padrão;

Aqui, você está rastreando o status de login do usuário usando state. Você tem dois botões, o de login e o botão de logout. Esses botões são renderizados dependendo se um usuário está logado 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 state para true e, por sua vez, a exibição do botão de login para o botão de logout.

Relacionado: O que é autenticação de usuário e como funciona?

Protegendo Componentes Privados

Para proteger as rotas, os componentes privados também devem ter acesso ao isLoggedIn valor. Você pode fazer isso criando um novo componente que aceita o isLoggedIn state como prop e o componente private como filho.

Por exemplo, se seu novo componente for chamado de "Protegido", você renderizaria um componente privado como este.

O componente Protegido verificará se isLoggedIn é verdadeiro ou falso. Se for verdade, ele irá em frente e retornará o componente Private. Se for falso, ele redirecionará o usuário para uma página na qual ele poderá fazer login.

Saiba mais sobre outras maneiras que você pode usar para renderizar um componente dependendo das condições deste artigo em renderização condicional em React.

Em seu aplicativo, crie Protected.js.

import { Navigate } de "react-router-dom";
const Protegido = ({ isLoggedIn, filhos }) => {
 if (!isLoggedIn) {
 Retorna ;
 }
 crianças de volta;
};
exportação padrão Protegido;

Neste componente, a instrução if é utilizada para verificar se o usuário está autenticado. Se não forem, Navegar a partir de react-router-dom redireciona-os para a página inicial. No entanto, se o usuário for autenticado, o componente filho será renderizado.

Usar Protected.js dentro UMApp.js modificar o Perfil rota da página.

 caminho="/perfil"
 elemento={



 }
/>

App.js deve ficar assim.

import { Routes, Route, BrowserRouter } de "react-router-dom";
import { useState } de "reagir";
importar Navbar de "./Navbar";
import Protegido de "./Protegido";
importar Home de "./Home";
importar Sobre de "./Sobre";
importar Perfil de "./Perfil";
função App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (verdadeiro);
 };
 const logOut = () => {
 setisLoggedIn (falso);
 };
 Retorna (




 {está logado? (
Sair
 ): (
Conecte-se
 )}

} />
 elemento={



 }
 />
} />





 );
}
exportar aplicativo padrão;

É isso na criação de rotas protegidas. Agora você pode acessar a página Perfil somente se estiver logado. Se você tentar navegar para a página de perfil sem fazer login, será redirecionado para a página inicial.

Controle de acesso baseado em função

Este tutorial mostrou como você pode restringir o acesso de usuários não autenticados a uma página em um aplicativo React. 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 concede acesso apenas a administradores. Aqui, você precisará adicionar lógica no componente Protegido que verifica se um usuário atende às condições exigidas.

Como implementar a renderização condicional no React.js (com exemplos)

A renderização condicional é uma maneira útil de melhorar seu aplicativo. Aqui está uma seleção de maneiras de usá-lo.

Leia a seguir

Sobre o autor