Mas como aplicariamos no index.js esse componentDidMount? Seria essa a melhor forma de fazer? Como seria com um middleware fazendo esse trabalho? Uma luz?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Mas como aplicariamos no index.js esse componentDidMount? Seria essa a melhor forma de fazer? Como seria com um middleware fazendo esse trabalho? Uma luz?
Descobri o render do Route, to indo por ele. O codigo ta entrando nele, mas falta uma luz para renderizar o componente da Route que chamou a function authentication do index.js
/* jshint esversion: 6 */
import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";
import Login from './components/Login';
import registerServiceWorker from './registerServiceWorker';
import './css/reset.css';
import './css/timeline.css';
import './css/login.css';
import {BrowserRouter as Router, Route, Switch, Redirect
} from 'react-router-dom';
function authentication(nextState) {
console.log(nextState);
if(localStorage.getItem('auth-token') === null){
nextState.location.pathname = "/";
nextState.match.path = "/";
nextState.match.url = '/';
} else {
return {App};
}
}
const loggedIn = false;
ReactDOM.render((
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route path="/timeline" render={authentication} />
</Switch>
</Router>),
document.getElementById("root")
);
registerServiceWorker();Arrumei uma solução usando o render dentro do Route, mas e em relação as boas práticas, está certo isso???
function authentication(nextState)
{
const url = nextState.location.pathname;
if(localStorage.getItem('auth-token') === null){
return <Login/>;
}
if(url != '/' && url != '/timeline'){
return <Error url={window.location.href} />;
}
return <App/>;
}
ReactDOM.render((
<Router>
<Switch>
<Route exact path="/*" render={authentication} />
</Switch>
</Router>),
Olá... Fiz da seguinte maneira e funcionou.
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
function verificaAutenticacao(nextState, replace) {
if (localStorage.getItem('auth-token') === null) {
return <Redirect to='/' />;
}
}
ReactDOM.render(
(
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route path="/timeline" render={verificaAutenticacao} />
</Switch>
</Router>
)
, document.getElementById('root'));
registerServiceWorker();