A autenticação serve como uma barreira protetora para aplicativos de software, verificando a identidade dos usuários e concedendo acesso a recursos protegidos. No entanto, exigir que os usuários se autentiquem repetidamente, especialmente em uma única sessão, pode levar à frustração, impedir a produtividade e arruinar sua experiência geral.

Para superar esse desafio, você pode utilizar cookies e armazenamento de sessão para persistir os dados de autenticação do usuário e outros dados personalizados informações—permitindo que os usuários permaneçam autenticados ao longo de uma sessão sem a necessidade de reautenticação constante, consequentemente, melhorando sua experiência.

Gerenciando dados de sessão do usuário usando cookies e armazenamento de sessão

O gerenciamento de sessão do usuário é um aspecto crucial da construção de aplicativos React robustos e seguros. O gerenciamento adequado dos dados da sessão usando cookies e armazenamento de sessão garante uma experiência de usuário tranquila e personalizada, mantendo as medidas de segurança necessárias.

Os dados da sessão do usuário geralmente incluem informações específicas da sessão atual de um usuário ou interação com um aplicativo. Esses dados podem variar dependendo dos requisitos e da funcionalidade do aplicativo, mas geralmente incluem o seguinte:

• Informações relacionadas à autenticação.
• Preferências e configurações do usuário.
• Atividade e histórico do usuário.

Cookies são arquivos de texto que contêm pequenos pedaços de dados armazenados por navegadores da web no dispositivo do usuário. Eles são comumente usados ​​para armazenar dados de autenticação e qualquer outra informação personalizada do usuário, permitindo que os aplicativos da Web mantenham as sessões do usuário em várias sessões do navegador.

Por outro lado, armazenamento de sessão—semelhante ao armazenamento local— é um mecanismo de armazenamento do lado do cliente fornecido pelos navegadores modernos. Ao contrário dos cookies, está limitado a uma sessão de navegação específica e acessível apenas dentro do mesmo separador ou janela. O armazenamento de sessão oferece uma maneira simples e direta de armazenar dados específicos da sessão para aplicativos da web.

Tanto os cookies quanto o armazenamento de sessão desempenham papéis cruciais no gerenciamento de dados de sessão do usuário. Os cookies são ótimos em situações em que é necessária a persistência de dados em várias sessões. Por outro lado, o armazenamento de sessão é vantajoso quando você deseja isolar dados em uma única sessão de navegação, fornecendo uma opção de armazenamento leve e específica.

Agora, vamos explorar como lidar com os dados da sessão do usuário, focando especificamente no armazenamento de informações de autenticação usando cookies e armazenamento de sessão.

Configurar um projeto React

Para começar, configurar um projeto React usando o Vite. Em seguida, instale esses pacotes em seu projeto.

npm install js-cookie react-router-dom

Idealmente, depois que um usuário faz login e suas credenciais são autenticadas com sucesso por uma API de autenticação de back-end, cookies e armazenamento de sessão armazenam tokens de autenticação, identificadores de sessão ou quaisquer outros dados relevantes durante a sessão.

Esses tokens ou identificadores junto com os dados adicionais armazenados no navegador do usuário são automaticamente incluídos em solicitações subseqüentes feitas ao servidor para verificação antes que um usuário possa acessar protegido recursos.

Dessa forma, a sessão de um usuário persiste em várias solicitações, garantindo que eles interajam perfeitamente com o aplicativo sem precisar autenticar novamente para cada solicitação.

Você pode encontrar o código deste projeto neste Repositório GitHub.

Gerenciando dados da sessão de autenticação do usuário usando cookies

Para demonstrar como usar cookies para armazenar informações de autenticação dos usuários, vá em frente e crie um novo componentes/Login.jsx arquivo no origem diretório. Dentro deste arquivo, adicione o seguinte código.

1. Faça as seguintes importações.

   importar { useState } de'reagir';
   importar { useNavigate } de'react-router-dom';
   importar Biscoitos de'js-cookie';

2. Crie um componente funcional e adicione elementos JSX para um formulário de login.

   const Entrar = () => {
   const [nome de usuário, setUsername] = useState('');
   const [senha, setPassword] = useState('');
   retornar (
   
   
   
    tipo="texto"
    espaço reservado ="Nome de usuário"
    valor={nome de usuário}
    onChange={(e) => setUsername (e.target.value)}
    />
    tipo="senha"
    espaço reservado ="Senha"
    valor={senha}
    onChange={(e) => setPassword (e.target.value)}
    />
   "enviar">Entrar</button>
    </form>
    );
   };
   exportarpadrão Conecte-se;

Como não temos uma API de back-end para autenticar as credenciais do usuário, criaremos uma função que verifica os dados inseridos pelo usuário no formulário de login usando as credenciais do usuário de teste. Dentro do componente funcional, adicione o seguinte código.

const testAuthData = {
 nome de usuário: 'teste',
 senha: 'teste',
 }; 
const autenticarUsuário = (usuário senha) => {
se (nome de usuário testAuthData.username && senha testAuthData.password) { 
const usuárioData = {
 nome de usuário,
 senha,
 };
const tempo de expiração = novoData(novoData().getTime() + 60000);
 Cookies.set('autentico', JSON.stringify (userData), { expira: data de validade });
retornarverdadeiro;
 }
retornarfalso;
 };
const handleLogin = (e) => {
 e.preventDefault();
const isAuthenticated = authenticateUser (nome de usuário, senha);
se (éAutenticado) {
 navegar('/protegido');
 } outro {
// Mostrar mensagem de erro ou executar outras ações para falha na autenticação
 }
 };

Dentro de AutenticarUsuário função, ele verifica se o nome de usuário e a senha fornecidos correspondem aos dados de autenticação de teste. Se as credenciais corresponderem, ele cria um dados do usuário objeto com o nome de usuário e a senha. Em seguida, ele define um tempo de expiração para o cookie e armazena o dados do usuário em um cookie chamado autenticação usando o Conjunto de cookies método.

Após a autenticação bem-sucedida, um usuário redireciona para uma página protegida, pois está autorizado a acessar recursos protegidos. Ao armazenar as informações de autenticação em um cookie, você estabelece uma sessão de usuário ativa, permitindo que solicitações subsequentes incluam os detalhes de autenticação automaticamente.

Esses dados de sessão do usuário permitem que o código do servidor verifique a identidade do usuário e autorize o acesso a privilégios sem exigir que o usuário se reautentique para cada solicitação.

Atualize o arquivo App.jsx

Faça alterações no App.jsx arquivo para lidar com o roteamento do usuário após a autenticação bem-sucedida

importar { BrowserRouter, Route, Routes, useNavigate } de'react-router-dom';
importar Biscoitos de'js-cookie';
importar Conecte-se de'./components/Login';
const Página Protegida = ({ ...descansar }) => {
const isAuthenticated = !!Cookies.get('autentico');
const navegue = useNavigate();
const handleLogout = () => { 
 Cookies.remove('autentico');
 navegar('/Conecte-se'); 
 };
se (!éAutenticado) {
 navegar('/Conecte-se'); 
retornarnulo; // Retorna null para evitar a renderização de qualquer outra coisa
 }
retornar (



tamanho da fonte: '24px', cor: 'azul' }}>Olá, Mundo!</h1>
margemTopo: '10px' }} onClick={handleLogout}>
 Sair
 </button>
 </div>
 );
};


const aplicativo = () => {
retornar (


"/protegido/*" elemento={} />
"/Conecte-se" elemento={} />
 </Routes>
 </BrowserRouter>
 );
};
exportarpadrão Aplicativo;

O código acima configura os componentes necessários e a lógica de roteamento. Inclui um botão de logout que, ao ser pressionado, apaga o cookie de autenticação e redireciona o usuário para a página de login.

Além disso, verifica a presença do cookie de autenticação e redireciona os usuários para a página de login caso ele esteja ausente. No entanto, se o cookie estiver presente, o Página Protegida componente renderiza uma página que é acessível exclusivamente para usuários autenticados.

Por fim, execute o comando abaixo para ativar o servidor de desenvolvimento para testar o aplicativo.

npm run dev

Em seu navegador, navegue até http://127.0.0.1:5173/logine insira as credenciais de autenticação de teste. Após o login com sucesso, um novo cookie é gerado contendo os dados da sessão, que inclui as informações de autenticação do teste.

Depois que o cookie expira ou quando você clica no botão de logout, o cookie é excluído. Essa ação encerra efetivamente a sessão do usuário ativo e faz seu logout.

Armazenando dados de autenticação do usuário usando o armazenamento de sessão

O armazenamento de sessão e os cookies funcionam de maneira semelhante. Para armazenar as informações necessárias no armazenamento de sessão do navegador, você pode utilizar o sessionStorage.setItem método.

 sessionStorage.setItem('autentico', JSON.stringify (userData));

Ao adicionar a declaração acima dentro do AutenticarUsuário função no Conecte-se componente, você pode armazenar os dados de autenticação do usuário no armazenamento de sessão do navegador.

Explorando casos de uso adicionais para cookies e armazenamento de sessão

Este guia destacou como usar cookies e armazenamento de sessão para armazenar as credenciais de autenticação dos usuários. No entanto, os cookies e o armazenamento de sessão oferecem uma gama mais ampla de recursos além do armazenamento de informações de autenticação.

Ao aproveitar esses recursos, você pode gerenciar dados de sessão adicionais, levando a uma experiência de usuário mais segura e personalizada.