Entrar Ainda não tem acesso?
2
respostas

Liberando o acesso para timeline pública com Route V4

Referente ao curso React parte 2: Container components e o ciclo de vida do react, no capítulo Navegação entre os usuários e mais um pouco de router e ciclo de vida e atividade 1- Liberando o acesso para timeline pública

por Agência Orange Five
| 227.4k xp | 12 posts
Marketing Digital

Como efetuar o mesmo código abaixo com o Route V4? Alguem conseguiu?


function verificaAutenticacao(nextState,replace) {
  const resultado = matchPattern('/timeline(/:login)',nextState.location.pathname);
  const enderecoPrivadoTimeline = resultado.paramValues[0] === undefined;
  console.log(resultado);
  if(enderecoPrivadoTimeline && localStorage.getItem('auth-token') === null){
    replace('/?msg=você precisa estar logado para acessar o endereço');
 }

ReactDOM.render(
  (
    <Router history={browserHistory}>
      <Route path="/" component={Login}/>
      <Route path="/timeline(/:login)" component={App} onEnter={verificaAutenticacao}/>      
      <Route path="/logout" component={Logout}/>
    </Router>
  ),
  document.getElementById('root')
);

Abraço

2 respostas
por Levy Alves da Silva
| 40.6k xp | 1 posts

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

function verificaAutenticacao() {

if (localStorage.getItem('auth-token') === null) { return ; } else { return ; } }

ReactDOM.render( ( ) , document.getElementById('root'));

por Nicolas Barbosa
| 130.7k xp | 4 posts

Opa, fiz na versão 4 e o meu ficou +- assim....

repare que o componente da lib do react, para verificar se a url digitada deve ou não ser validada, também muda.

Abs,

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

function verificaAutenticacao(nextState, replace) { 
    const match = matchPath('/timeline', {
        path: nextState.match.url,
        exact: true
    })  

    let valida = false
    if (match !== null) {
        valida = match.isExact
    }

    if (valida && localStorage.getItem('auth-token') === null) { 
        return <Redirect to={{
            pathname: '/',
            state:  {msg: 'Faça login para acessar esta página'}
        }}/>
    }
    return <App/>
}

ReactDOM.render(
    (<Router>
        <Switch>
            <Route exact path="/" component={Login}/>
            <Route exact path="/timeline/:login?" render={verificaAutenticacao}/>
            <Route exact path="/logout" component={Logout}/>
        </Switch>
    </Router>), 

    document.getElementById('root')
);

registerServiceWorker();