O melhor lugar para você aprender Javascript.

Descubra como é simples dominar o desenvolvimento Full Stack.

Como criar rotas autenticadas no React Js.

Como criar rotas autenticadas no React Js.

A criação de rotas autenticadas é muito importante quando falamos de rotas de uma aplicação.

Hoje, vamos aprender, de maneira simples, como criar rotas que precisem de autenticação na sua aplicação em React Js.

Passo #1: Criação do projeto

Para começamos, criaremos um projeto através do Create React App.

Você pode criar seu projeto através do comando abaixo:

create-react-app app

Com o processo finalizado, você pode entrar na pasta app que você criou e rodar o comando:

yarn start

Após alguns segundos, uma nova janela no seu navegador se abrirá, semelhante à essa:

Tela padrão de projetos criados através do CRA.

Passo #2: Instalação das bibliotecas

Agora, instalaremos as bibliotecas que usaremos no nosso projeto.

Para isso, dentro da pasta do seu projeto, rode o comando abaixo:

yarn add react-router-dom prop-types

O react-router-dom é a biblioteca responsável por toda a parte de navegação da nossa aplicação.

O prop-types é uma biblioteca oferecido pela própria equipe do React para trabalharmos com os tipos de props dos nossos componentes.


Passo #3: Configurações gerais

Em todos os projetos que eu crio utilizando Create React App, eu sempre gosto de fazer algumas configurações para deixar o projeto mais organizado.

Começaremos apagando alguns arquivos na pasta src, são eles:

  • App.css
  • App.test.js
  • index.css
  • logo.svg
  • serviceWorker.js

Apague também o arquivo manifest.json, que está na pasta public.

Precisamos também remover a importação desses arquivos.

O seu index.js deve ficar da seguinte forma:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

E o seu arquivo App.js, deve ficar da seguinte forma:

import React from 'react';

function App() {
  return <div />;
}

export default App;

Nesse momento, sua estrutura deve estar semelhante à essa:


Passo #4: Criação das páginas

Para essa aplicação, usaremos duas páginas para representar as rotas autenticadas e as não autenticadas.

Para começar, crie uma pasta pages dentro da pasta src.

Dentro da pasta pages, crie uma pasta Login.

Na pasta Login, crie um arquivo index.js

Adicione ao arquivo index.js da pasta Login, o seguinte conteúdo:

import React from 'react';

function Login({ history }) {
  function handleLogin() {
    localStorage.setItem('@SuaAplicacao:JWT_TOKEN', 'seutokenjwt');

    history.push('Main');
  }

  return (
    <form onSubmit={handleLogin}>
      <input type="text" name="email" placeholder="Seu email" required />
      <input type="password" name="password" placeholder="Sua senha" required />
      <button type="submit">Login</button>
    </form>
  );
}

export default Login;

Esse página representará a nossa tela de login.

Nela, a função handleLogin salva um token no localStorage. Esse token seria o token JWT que receberíamos da nossa API.

Em seguida, a função handleLogin faz o redirecionamento para a rota Main, que será uma rota autenticada.

Agora, criaremos a página Main.

Para isso, podemos repetir o processo de criação da pasta Login.

Crie uma pasta Main, e nela, crie um arquivo index.js

No index.js da pasta Main, adicionaremos o seguinte conteúdo:

import React from 'react';

function Main({ history }) {
  function handleLogout() {
    localStorage.removeItem('@SuaAplicacao:JWT_TOKEN');

    history.push('/');
  }

  return (
    <div>
      <h3>Bem vindo</h3>
      <button type="button" onClick={handleLogout}>
        Sair
      </button>
    </div>
  );
}

export default Main;

Nessa página, temos uma mensagem de boas vindas e um botão para sair.

O botão para sair chama a função handleLogout.

A função handleLogout remove o token que salvamos no login e, em seguida, nos redireciona novamente para a tela de Login.


Passo #5 Criação das rotas

As rotas serão definitivamente a parte mais importantes da nossa aplicação.

Para começarmos, crie uma pasta routes dentro da pasta src.

Dentro da pasta routes, crie um arquivo Route.js e adicione à ele o seguinte conteúdo:

import React from 'react';
import PropTypes from 'prop-types';
import { Redirect, Route } from 'react-router-dom';

function RouteWrapper({
  redirectTo, isPrivate, component: Component, ...rest
}) {
  const authenticated = localStorage.getItem('@SuaAplicacao:JWT_TOKEN');

  if (!authenticated && isPrivate) return <Redirect to={redirectTo} />;

  return <Route {...rest} render={props => <Component {...props} />} />;
}

RouteWrapper.propTypes = {
  redirectTo: PropTypes.string,
  isPrivate: PropTypes.bool,
  component: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
    .isRequired,
};

RouteWrapper.defaultProps = {
  redirectTo: '/',
  isPrivate: false,
};

export default RouteWrapper;

Esse arquivo será um wrapper das nossas rotas.

Nesse wrapper, nós fazemos uma verificação se o usuário não está autenticado (através do token que definimos no login), e se a rota que ele está tentando acessar é um rota privada (através da prop isPrivate).

Caso duas condições sejam verdadeiras, nós o redirecionamos para a rota que recebemos através da prop redirectTo, que tem como valor padrão a rota raiz.

Caso a rota não seja privada ou o usuário esteja autenticado, nós o redirecionamos para a rota que ele está tentando acessar.

Utilizamos o oneOfType para que o tipo de componente possa ser tanto um Stateful, como um Stateless Component.

A partir de agora, utilizaremos ele como o nosso Route em vez do Route do react-router-dom.

Agora, criaremos um arquivo index.js na pasta routes, com o seguinte conteúdo:

import React from 'react';
import { Switch } from 'react-router-dom';

import Login from '../pages/Login';
import Main from '../pages/Main';

import Route from './Route';

export default function Routes() {
  return (
    <Switch>
      <Route path="/" exact component={Login} />
      <Route path="/main" exact component={Main} isPrivate />
    </Switch>
  );
}

Perceba que não importamos o Route do react-router-dom, mas sim do wrapper que criamos.

Para definirmos que uma rota é privada, basta que passemos a propriedade isPrivate, como fazemos com a rota /main.

Passo #7: Finalizando a aplicação

Para finalizar, precisamos importar todas as modificações que fizemos até agora.

Para isso, deixe seu App.js da seguinte maneira:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import Routes from './routes';

function App() {
  return (
    <BrowserRouter>
      <Routes />
    </BrowserRouter>
  );
}

export default App;

Ao utilizar o react-router-dom, é necessário que todas as nossas rotas fiquem dentro de um Router.

O Router mais utilizado para esse tipo de aplicação é o BrowserRouter.

Ao finalizar sua aplicação, sua estrutura deve estar semelhante à essa:


Demonstração

Abaixo você pode conferir uma demonstração do projeto:

Ver código no github ↗

Forte Abraço,

Carlos Levir

Tags:

Entre para nossa lista e receba conteúdos exclusivos e com prioridade

Sobre o Autor

Carlos Levir
Carlos Levir

Desenvolvedor fascinado por aprendizado e pelo ecossistema Javascript. Sempre em busca do próximo nível. Atualmente atua como Engenheiro de Software na Rocketseat.

0 Comentários

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *