3
respostas

React-Router-Dom (onEnter)

Fala pessoal! Estou com um problema. No curso de React módulo tem, tem a seguinte aula "Protegendo urls e possibilitando o logout", porém na v4 do react-router-dom, não existe mais o atributo onEnter na módulo Route. E o mais próximo que achei foi o seguinte código:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Login from './componentes/Login';
import './css/reset.css';
import './css/timeline.css';
import './css/login.css';
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom';

function verificaAutenticacao(next, replace)
{
    if(localStorage.getItem('auth-token') != null)
    {
        return true;
    }
}

ReactDOM.render(
    (
        <Router>
            <Switch>            
                <Route exact path="/" component={Login}/>
                <Route path="/timeline" render={() => (
                    verificaAutenticacao() ? (
                        <App />
                    ) : (
                        <Redirect to="/?msg=Você precisa estar logado para acessar a Timeline!"/>
                    )
                )}/>
            </Switch>            
        </Router>
    ), 
    document.getElementById('root')
);
registerServiceWorker();

Tentei procurar na internet uma alternativa para isso mas não encontrei. Poderiam me ajudar com isso?

Um forte abraço!

3 respostas

Opa Gabriel, esse é um bom caminho mesmo. Aqui no site deles, inclusive tem um exemplo => https://reacttraining.com/react-router/web/example/auth-workflow

Eles criam um componente que faz o papel da rota privada.

Fala Gabriel, beleza? Atualmente a solução que está sendo usada é essa mesma, não encontrei uma alternativa para esse cara.

Obrigado pela atenção galera, vou continuar nessa linha!

Inclusive a forma de recuperar o parâmetro também mudou, agora é assim:

constructor(props)
    {
        super(props);
        const params = new URLSearchParams(props.location.search);
        const msgParam = params.get('msg');
        this.state = {msg: msgParam};
    }

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software