-1

Sou novo no react e estou tentando implementar um controle de rotas, para isso criei um arquivo Auth:

const Auth = {
    isAdmin: false,
    authenticate(){
        this.isAdmin = true
    },
    signout(){
        this.isAdmin = false
    },
    getAuth(){
        return this.isAdmin;
    }
}
export default Auth

Quando eu faço o login e o logout tudo ocorre de acordo, no login o isAdmin passa a valer true e no logout passa a valer false. Porém no if ternário para mostrar a opção de logout não funciona, é como se não fizesse a comparação. Mas na hora de imprimir o valor do isAdmin, aparece o valor correto:

{Auth.getAuth() ?( <li className="nav-item active">
              <a href="#" onClick={logout} style={{ textDecoration: "none" }}>
                <p className="nav-link">Log Out</p>
              </a>
            </li>) : null}

mas mesmo com o isAdmin sendo true, essa li não é renderizada, e o mesmo acontece para o controle de rota protegida, nunca consigo acessar mesmo o isAdmin sendo true:


function App() {
  return (
    <div>
      <div className="App">
        <Header />
        <Switch>
          <Route exact path="/" component={PostInfo} />
          <Route path="/register" component={Register} />
          <Route path="/login" component={Login} />
          <Route path="/post/:slug" component={Post} />
          <PrivateRoute path="/add" component={Add} />
        </Switch>
      </div>
    </div>
  );
}
const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      Auth.getAuth() ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/",
          }}
        />
      )
    }
  />
);

Não consigo achar um problema no código... e pesquisei bastante mas tudo parece estar correto

1
  • Ninguém sabe ajudar ou apontar uma direção
    – Thiago
    Commented 29/08/2020 às 3:57

1 Resposta 1

0

O problema é que o estado não é global, e por isso o seu Auth.getAuth() sempre vai retornar false, ou seja, como você importa esse código no componente ele vai ter o seu estado inicial, existe uma forma de manter um estado global onde os componentes podem compartilhar desse mesmo estado que é com Context ou Redux, vou propor o primeiro com Context que é mais fácil refletir no seu código:

///// Parte importante do Estado Global
const CounterContext = React.createContext();
const CounterProvider = ({children}) => {
  const [isLogado, setIsLogado]= React.useState(false);
  return (
    <CounterContext.Provider value={{isLogado, setIsLogado}}>
    {children}
    </CounterContext.Provider>
  )
}
///////////////////////////////////////
//Os componentes abaixo compartilham o mesmo Contexto
function App() {
  const {isLogado,setIsLogado} = React.useContext(CounterContext); 
  return (
    <div>      
      <button 
        onClick={e => setIsLogado(state => !state)}>
        {isLogado?"Sair":"Entrar"}
      </button>
    </div>
  )
}
function Menu() {
  const {isLogado,setIsLogado} = React.useContext(CounterContext);
  return (
    <div>
    {isLogado ? (<div>Logado</div>) : (<div>Não Logado</div>) }   
    </div>
  )
}
function Global() {
  return (
    <CounterProvider>
     <App/>
     <Menu/>
    </CounterProvider>
  )
}
//Renderiza o Global que disponibiliza o estado em todos os
//outros componentes
ReactDOM.render(<Global/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Nesse trecho de código:

function Global() {
  return (
    <CounterProvider>
     <App/>
     <Menu/>
    </CounterProvider>
  )
}

significa que todos vão compartilhar o mesmo estado da variável isLogado e ao qualquer alteração será então refletida em todos componentes. A construção é muito simples e a única forma (claro Redux também faz isso) para compartilhar estado global entre os componentes.

No seu código o seu provider tem que ser o primeiro componente envolvendo os demais.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .