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 crio-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 crie o formulário de login.
importar { useEstado } a partir de "reagir";
importar Painel a partir de "./Painel";
const Entrar = () => {
const [username, setusername] = useState("");
const [senha, definir senha] = useState("");
const [autenticado, setautenticado] = useState (localStorage.getItem (localStorage.getItem("autenticado")|| falso));
const users = [{ nome de usuário: "Jane", senha: "senha de teste" }];
const handleSubmit = (e) => {
e.preventDefault()
const conta = users.find((usuário) => user.username nome de usuário);
se (conta && conta.senha senha) {
setautenticado(verdadeiro)
localStorage.setItem("autenticado", verdadeiro);
}
};
Retorna (
<div>
<p>Bem vindo de volta</p>
<form onSubmit={handleSubmit}>
<entrada
tipo="texto"
nome="Nome de usuário"
valor={nome de usuário}
onChange={(e) => setusername (e.target.value)}
/>
<entrada
tipo="senha"
nome="Senha"
onChange={(e) => setpassword (e.target.value)}
/>
<tipo de entrada ="enviar" valor="Enviar" />
</form>
</div>
)
};
}
exportarpredefinição Conecte-se;
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, usando Reagir contexto seria uma escolha melhor.
Criar uma página de painel
Adicione o seguinte código em um novo arquivo chamado Dashboard.js.
const Painel = () => {
Retorna (
<div>
<p>Bem-vindo ao seu painel</p>
</div>
);
};
exportarpredefinição Painel;
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 instalar react-router-dom
Em index.js, configure o roteamento para seu aplicativo.
importar Reagir a partir de "reagir";
importar ReactDOM a partir de "react-dom/cliente";
importar Aplicativo a partir de "./Aplicativo";
importar { BrowserRouter, Rota, Rotas } a partir de "react-router-dom";
importar Conecte-se a partir de "./Conecte-se";
importar Painel a partir de "./Painel";
const root = ReactDOM.createRoot(documento.getElementById("raiz"));
raiz.render(
<Reagir. Modo estrito>
<NavegadorRoteador>
<Rotas>
<Elemento de índice de rota={<Aplicativo />} />
<Caminho da rota="Conecte-se" elemento={<Conecte-se />} />
<Caminho da rota="painel de controle" elemento={<Painel />} />
</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.
importar { useEffect, useState} a partir de "reagir";
const Painel = () => {
const [autenticado, setautenticado] = useState(nulo);
useEfeito(() => {
constlogInUser = localStorage.getItem("autenticado");
if (loggedInUser) {
setautenticado (loggedInUser);
}
}, []);
if (!autenticado) {
// Redirecionar
} senão {
Retorna (
<div>
<p>Bem-vindo ao seu painel</p>
</div>
);
}
};
exportarpredefinição Painel;
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.
importar { Navegar } a partir de "react-router-dom";
Para redirecionar usuários não autenticados, use-o da seguinte maneira.
if (!autenticado) {
Retorna <Navegue substituir para ="/login" />;
} senão {
Retorna (
<div>
<p>Bem-vindo ao seu painel</p>
</div>
);
}
O componente Navigate é uma API declarativa. Ele depende de 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.
importar { useNavegar } a partir de "react-router-dom";
Redirecionar assim que o usuário for autenticado com sucesso no handleSubmit() funcionar assim:
const navegar = useNavegar();
const Entrar = () => {
const navegar = useNavegar();
const [username, setusername] = useState("");
const [senha, definir senha] = useState("");
const [autenticado, setautenticado] = useState(
localStorage.getItem (localStorage.getItem("autenticado") || falso)
);
const users = [{ nome de usuário: "Jane", senha: "senha de teste" }];
const handleSubmit = (e) => {
e.preventDefault();
const conta = users.find((usuário) => user.username nome de usuário);
se (conta && conta.senha senha) {
localStorage.setItem("autenticado", verdadeiro);
navegar("/dashboard");
}
};
Retorna (
<div>
<form onSubmit={handleSubmit}>
<entrada
tipo="texto"
nome="Nome de usuário"
valor={nome de usuário}
onChange={(e) => setusername (e.target.value)}
/>
<entrada
tipo="senha"
nome="Senha"
onChange={(e) => setpassword (e.target.value)}
/>
<tipo de entrada ="enviar" valor="Enviar" />
</form>
</div>
);
};
Neste exemplo, assim que o usuário enviar o formulário com os detalhes corretos, ele será redirecionado para o painel.
Ao criar aplicativos, um dos objetivos é proporcionar aos usuários a melhor experiência. Você pode fazer isso levando o usuário de volta à página que estava antes, redirecionando-o para a página de login. Você pode fazer isso passando -1 para navegar assim, navegar (-1). Ele age da mesma maneira que pressionar o botão Voltar no seu navegador.
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.