Entrar Ainda não tem acesso?
1
resposta

Liberando acesso a URL pública react-router 4

Referente ao curso React parte 2: Container components e o ciclo de vida do react

por Nath Paiva
| 85.4k xp | 3 posts
Front-end

Oi pessoal, beleza?

Eu to fazendo o curso e utilizando o react-router 4 porém quando vou fazer a liberação para acessar a URL pública não sei se estou aplicando a solução correta.

Basicamente, criei um componente para URLs autenticadas. Dentro do componente eu pego qual o path e faço um replace do dele para ter o valor, ai eu vejo se dentro dos parametros que tem em match ele existe ou não.

Isso funcionou, mas não acho que seja a melhor forma para fazer! Alguma dica?

import React from 'react';
import { Route, Redirect, withRouter } from 'react-router-dom';

const Authenticated = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => {

    const key = props.match.path.replace(/^.*[\\\/]:/, '').replace('?', '');
    const isTrue = props.match.params[key] === undefined;

    if (isTrue && !localStorage.getItem('auth-token')) {
      return (<Redirect to="/?msg=voce nao pode acessar, é preciso estar logado" />);
    } else {
      return (<Component {...props} />);
    }
  }} />
);

export default Authenticated;
1 resposta
por Levi Lopes Soares e Silva
| 79.2k xp | 1 posts
Técnico Judiciário - Área Administrativa - Esp. Tecnologia da Informação

Oi Nath,

Caso a ideia seja somente resolver o problema do Timeline, o guia de migração do react-router v4 recomenda substituir a utilização das propriedades on* (onEnter, por exemplo) pelos métodos do ciclo de vida do componente renderizado pelo <Route>.

A solução seria, então, mover a verificação de autenticação para o método componentDidMount() do componente Timeline e, caso necessário, redirecionar utilizando a propriedade history, também passada para o componente pelo <Route>:

componentDidMount() {
    const { login } = this.props.match.params;

    if (login === undefined && localStorage.getItem('auth-token') === null) {
      this.props.history.replace('/?msg=Você precisa estar logado para acessar este endereço');
    }
}

Caso a ideia seja fazer um componente genérico, eu manteria somente a verificação do token dentro do mesmo e faria o restante do tratamento utilizando a API do react-router:

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

const AuthenticatedRoute = ({ component: Component, ...rest }) => {
  let component;
  if (!localStorage.getItem('auth-token')) {
    component = <Redirect to="/?msg=voce nao pode acessar, é preciso estar logado" />
  } else {
    component = <Component {...props} />
  }
  return <Route {...rest} component={component} />;
};

export default AuthenticatedRoute;

Na parte do código referente ao roteamento:

<Switch>
  <AuthenticatedRoute exact path='/' component={Timeline} />
  <Route path='/:login' component={Timeline} />
</Switch>

Não testei o código, mas faria algo nessa linha. Boa sorte :-)