1

Estou fazendo uma aplicação em React e quero fazer uma checagem, se o cara estiver autenticado, redirecionar direto para a Home, se não, vai pra tela de Login, esse é o Código:

userReducer.js

const initialState = {
    isAuth: false
}

rootReducers.js

export default combineReducers({
    login: loginReducer,
    user: userReducer
})

App.js

function App(props) {
    let { isAuth } = props;
    return (
        <div className="App">
            <Root
                isAuth={isAuth}
            />
        </div>
    );
}

function mapStateToProps(state) {
    return {
        isAuth: state.user.isAuth
    };
}

export default connect(mapStateToProps)(App);

root.js

class Root extends Component {
    constructor(props){
        super(props);
    }

    componentDidMount() {
        if(!this.props.isAuth) {
            return <Redirect to="/Login" />
        }
    }

    render() {
        return (
            <BrowserRouter>
                {
                    window.location.pathname === '/Login' ? ''
                        :
                            <Navbar
                                logo={ logo }
                                background="#fff"
                                hoverBackground="#ddd"
                                linkColor="#777"
                            />
                }
                <Switch>
                    <Route path="/Login" exact component={Login} />
                    <Route path="/Home" component={Home} />
                    <Route path="/Treinos" component={Treinos} />
                    <Route path="/Lives" component={Lives} />
                    <Route path="/Video_Aulas" component={VideoAulas} />
                    <Route path="/" exact component={Home} />
                </Switch>
            </BrowserRouter>
        );
    }
}

export default Root;

Então, na store eu tenho uma variável isAuth, recebo ela no meu App.js e passo como prop para o meu root.js, quero que quando meu root.js iniciar ele cheque se está ou não autenticado, coisa que já está fazendo, mas se não estiver if(!this.props.isAuth){...} redirecione para '/Login'.

Porém a variável chega nele como false, ele identifica que é para entrar no if mas nada acontece. Por que meu Redirect não funciona? É algum conflito com o Redux ou algo do tipo? Como resolver?

0

1 Resposta 1

3

O problema é que você está utilizando return no ComponentDidMount com a intenção de renderizar um elemento. Isso não acontece.

Para renderizar o elemento, ele deve ser retornado dentro do render. Uma vez que você colocar o <Redirect> no render, uma solução adequada é, como exemplificada na documentação:

<Route exact path="/">
  {loggedIn ? <Redirect to="/dashboard" /> : <PublicHomePage />}
</Route>

Adaptando para o seu caso, ao invés de retornar o Switch com todas as rotas, você retorna apenas o <Redirect>.

1
  • Pow, funcionou certinho, muito obrigado cara! Sou meio novo ainda no React, vim do Angular, então algumas coisas são bem confusas, mas muito obrigado!
    – Ban
    Commented 10/04/2020 às 1:37

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 .