Duvidas sobre ReactJS Admin/User?

Front-end
#1

Pessoal, estou com uma duvida sobre o ReactJS, tenho um Admin/User no meu sistema e tenho algumas rotas que só será acessada se for Admin, para cada um deles eu criaria um NavBar ou poderia fazer juntos e remover ao acessar o sistema.

#2

Você precisa fazer condições nessa NavBar com a proteção das rotas e se a pessoa pode ou não acessar. Não precisa duplica a NavBar é só montar um lógica condizente com o seu código.

Com não tem um exemplo fica complica opinar a fundo… mas, é isso depende de condição para esse NavBar carregar

1 curtida
#3

Muito obrigado, eu já fiz a proteção nas rotas! Coloquei um remove() em js, mas ao carregar a pagina ela aparece por alguns segundos, saberia como resolver?

#4

Se ver código e como acontece complicado, é um problema local

#5 
verificaAdmin = async () => {
    var role = sessionStorage.getItem('role')
    const response = await api.get(`/role/listar/${role}`)
    if(response.data.data.nome != 'admin'){
      document.getElementById('adminUser').remove()
      document.getElementById('adminEmpresa').remove()
    }
}
#6

não se usa em React tal linha de código document.getElementById, por isso o seu componente não persiste a informação … !!! entendeu agora.

Ou seja, fazendo errado.

#7

Como faria para pegar este Id e remove-lo ? Pensei que poderia fazer igual o JS, pois ele remove mas tem demora 0.5s para remover.

#8

Um exemplo:

Esse código aparece e esconde um Label, olha como faz:

class App extends React.Component {
  constructor(props) {
  	super(props);
    this.state = {
    	show: true,
      toogle: 'show'
    };
    this.toggleButton = this.toggleButton.bind(this);
  }
  toggleButton(){  	
    let {show, toogle} = this.state;
    show = !show;
    toogle = show ? 'block': 'none';    
  	this.setState({
    	show,
      toogle
    });
  }
  render() {
  	const {show, toogle} = this.state;
    const labelShow = toogle === 'none'
    	? 'Show'
      : 'Hide';
    return (
    	<div>
        <div style={{height: '20px'}}>
          <label style={{display: toogle}}>Show</label>
        </div>
        <div style={{height: '20px'}}>
          <button onClick={this.toggleButton}>{labelShow}</button>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

show-hide

Isso tudo é feito em ReactJs, então na hora que carregar o NavBar precisa esconder o menu como se fosse esse button e label.

1 curtida
#9

Da mesma forma ainda, existe um demora de milissegundos ao fazer reload.

#10

Outro jeito de fazer é assim:

const {show} = this.state;

return (
    { show &&
        <label>Show</label>
    }
)

O código acima verifica se show returna true ou false, se for true, a label é renderizada no DOM.

Possivelmente o seu render esta sendo executado por inteiro, fazendo com que tenha esse delay.
Caso esse seja o problema, experimente fazer o seu componente herdar de Pure Component

Ex:

class App extends React.PureComponent {
#11

Então não precisa do toogle! é outra forma também, mas, fica complicado em saber se na tela dele só tem isso, porque, se tiver um componente isso é viável, mas, se tiver outros não é!

1 curtida
#12

Opa, esqueci de remover :sweat_smile:

Corrigido :+1:

1 curtida
#14

Mesmo assim, ainda tem o delay.

1 curtida
#15

Sim, só tem um componente.

1 curtida
#16

Tem como você postar o seu código no jsfiddle? se não está usando algo errado também ai.

#17

Ai está, https://jsfiddle.net/dfzso2eq/ .

#18

A forma como foi citada:

class App extends React.Component {
  constructor(props) {
  	super(props);
    this.state = {
    	show: true
    };
    this.toggleButton = this.toggleButton.bind(this);
  }
  toggleButton(){  	
    let { show } = this.state;
    show = !show;    
  	this.setState({show});
  }
  render() {
  	const { show } = this.state;
    const labelShow = show ? 'hide': 'show';
    return (
    	<div>
        <div style={{height: '20px'}}>
          { show && (<label>Show</label>) }
        </div>
        <div style={{height: '20px'}}>
          <button onClick={this.toggleButton}>{labelShow}</button>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))
#19

Aqueles setInterval??? é ali o problema! ele fica em a cada 2 segundos fazendo a operação… não ta errado?

#20

Mas ele renderiza o verificaAdmin() e depois os setInterval. Mesmo excluindo ele aplica um delay perceptível.

#21

Talvez tem mais coisas além desse código.

Note

Eu já achei vários problemas, será que um revisão (não precisa ser só no carro) o seu código precise passar?