Como redirecionar um usuário após o login no React

Normalmente, ao criar aplicativos da Web, as páginas de login são usadas para proteger as páginas privadas. Por exemplo, para uma plataforma de blog, o painel pode ser acessado apenas por usuários autenticados. Se um usuário não autenticado tentar acessar essa página, o aplicativo o redirecionará para a página de login. Uma vez que eles estão logados, eles obtêm acesso.

Neste artigo, veremos como você pode redirecionar um usuário de uma página restrita para uma página de login. Também discutiremos como você pode retornar o usuário à página em que estava após o login.

No React Router v6, existem duas maneiras que você pode usar para redirecionar um usuário – o componente Navigate e o useNavegar() gancho.

Criar um aplicativo React

Crie um aplicativo React simples usando o criar-reagir-aplicativo comando. Você usará este aplicativo para testar como o componente Navigate e o useNavegar() trabalho de gancho.

npx create-react-app react-redirect

Criar uma página de login

Você precisará criar uma página de login para autenticar os usuários. Como este não é um tutorial de autenticação, use uma matriz de objetos como banco de dados do usuário.

Crie um novo arquivo no src pasta e nomeie Login.js. Em seguida, adicione o seguinte código, para criar o formulário de login.

import { useState } from "react";
import Dashboard from "./Dashboard";
const Login = () => {
const [username, setusername] = useState("");
const [password, setpassword] = useState("");
const [authenticated, setauthenticated] = useState(localStorage.getItem(localStorage.getItem("authenticated")|| false));
const users = [{ username: "Jane", password: "testpassword" }];
const handleSubmit = (e) => {
e.preventDefault()
const account = users.find((user) => user.username === username);
if (account && account.password === password) {
setauthenticated(true)
localStorage.setItem("authenticated", true);
}
};
return (
<div>
<p>Welcome Back</p>
<form onSubmit={handleSubmit}>
<input
type="text"
name="Username"
value={username}
onChange={(e) => setusername(e.target.value)}
/>
<input
type="password"
name="Password"
onChange={(e) => setpassword(e.target.value)}
/>
<input type="submit" value="Submit" />
</form>
</div>
)
};
}
export default Login;

Este é um formulário de login simples. Quando um usuário envia seu nome de usuário e senha, eles são verificados no array. Se esses detalhes estiverem corretos, o estado autenticado será definido como verdadeiro. Como você estará verificando se o usuário está autenticado no componente Dashboard, você também precisa armazenar o status de autenticação em algum lugar que possa ser acessado por outros componentes. Este artigo usa armazenamento local. Em uma aplicação real, usar o contexto React seria uma escolha melhor.

Criar uma página de painel

Adicione o seguinte código em um novo arquivo chamado Dashboard.js.

const Dashboard = () => {
return (
<div>
<p>Welcome to your Dashboard</p>
</div>
);
};
export default Dashboard;

O painel deve ser acessível apenas para usuários autenticados. Portanto, quando os usuários visitarem a página do painel, verifique primeiro se eles estão autenticados. Se não estiverem, redirecione-os para a página de login.

Para fazer isso, configure as rotas do aplicativo primeiro usando o roteador React.

npm install react-router-dom

Em index.js, configure o roteamento para seu aplicativo.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./Login";
import Dashboard from "./Dashboard";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route index element={<App />} />
<Route path="login" element={<Login />} />
<Route path="dashboard" element={<Dashboard />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);

Proteja a página do painel

Agora que suas rotas de aplicativo estão configuradas, a próxima etapa é tornar a rota do painel privada. Quando o componente Dashboard é carregado, o estado de autenticação é recuperado do armazenamento local e armazenado no estado. Se o usuário não estiver autenticado, o aplicativo redirecionará para a página de login, caso contrário, exibirá a página do painel.

import { useEffect, useState } from "react";
const Dashboard = () => {
const [authenticated, setauthenticated] = useState(null);
useEffect(() => {
const loggedInUser = localStorage.getItem("authenticated");
if (loggedInUser) {
setauthenticated(loggedInUser);
}
}, []);
if (!authenticated) {
} else {
return (
<div>
<p>Welcome to your Dashboard</p>
</div>
);
}
};
export default Dashboard;

Redirecionar o usuário para a página de login usando a navegação

O componente Navigate substituiu o componente Redirect que foi usado no React Router v5. Importar Navegue de react-router-dom.

import { Navigate } from "react-router-dom";

Para redirecionar usuários não autenticados, use-o da seguinte maneira.

if (!authenticated) {
return <Navigate replace to="/login" />;
} else {
return (
<div>
<p>Welcome to your Dashboard</p>
</div>
);
}

O componente Navigate é uma API declarativa. Ele se baseia em um evento de usuário, que neste caso é a autenticação para causar uma mudança de estado e, consequentemente, causar uma nova renderização do componente. Observe que você não precisa usar a palavra-chave replace. Usá-lo substitui o URL atual em vez de enviá-lo para o histórico do navegador.

Redirecionar usuário para outra página usando useNavigate()

A outra opção para realizar redirecionamentos no React é o useNavegar() gancho. Este gancho fornece acesso à API imperativa de navegação. Comece importando-o de react-router-dom.

import { useNavigate } from "react-router-dom";

Redirecionar assim que o usuário for autenticado com sucesso no handleSubmit() funcionar assim:

const navigate = useNavigate();
const Login = () => {
const navigate = useNavigate();
const [username, setusername] = useState("");
const [password, setpassword] = useState("");
const [authenticated, setauthenticated] = useState(
localStorage.getItem(localStorage.getItem("authenticated") || false)
);
const users = [{ username: "Jane", password: "testpassword" }];
const handleSubmit = (e) => {
e.preventDefault();
const account = users.find((user) => user.username === username);
if (account && account.password === password) {
localStorage.setItem("authenticated", true);
navigate("/dashboard");
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
name="Username"
value={username}
onChange={(e) => setusername(e.target.value)}
/>
<input
type="password"
name="Password"
onChange={(e) => setpassword(e.target.value)}
/>
<input type="submit" value="Submit" />
</form>
</div>
);
};

Neste exemplo, assim que o usuário enviar o formulário com os detalhes corretos, ele será redirecionado para o painel.

Roteamento em React

Neste artigo, você aprendeu como redirecionar um usuário para outra página no React usando o componente Navigate e o useNavegar() gancho. O artigo usou um formulário de login para demonstrar como você pode redirecionar usuários não autenticados de uma página protegida para a página de login.