1

Estoy hace unos días intentando realizar un login con reactJs y Redux.

Tengo una API en Laravel que procesa email y contraseña y devuelve un token, asique por el lado backend no hay problema.

En React creé actions(usando Thunks) y reducers para "Auth". Abajo los detallo.

Una vez tengo el token, lo almaceno en localStorage, y luego, en el componente, reviso si hay algo almacenado en localStorage.token para determinar si se logueó o no (Se que no es la mejor forma pero recién estoy probando). El tema es que no re-renderiza el componente, entonces no me lleva del "login" a la pagina principal. Tengo que actualizar la web y ahi recien me lleva. Cual es la mejor forma de chequear si el usuario está logueado o no?

Muchas gracias por cualquier sugerencia.

authActions.js

export const loginBar = data => async (dispatch) => {
    await Api.bars.login(data)
        .then(res => {
            localStorage.setItem("token", res.data.token)
            localStorage.setItem("loggedIn", 1)
            dispatch(loginBarSuccess(res.data))
        })
        .catch(err => {
            console.log(err, "ERROR loginBar axios")
        })
}

const loginBarSuccess = payload => {
    return {
        type: Types.LOGIN_BAR_SUCCESS,
        payload
    }
}

authReducers.js

function AuthReducer(state = initialState, action) {
    switch (action.type) {
        case Types.LOGIN_BAR_SUCCESS:
            return {
                ...state,
                loggedIn: 1,
                token: action.payload.token
            }
        case Types.LOGOUT_BAR_SUCCESS:
            console.log(state)
            return { 
                ...state,
                loggedIn: 0,
                token:'' 
            }
default:
            return state

Componente -> AuthLogin.js

const AuthLogin = props => {
    const { loginBar, onChange, user } = props

    const { register, handleSubmit, errors } = useForm()

    const onSubmit = data => {
        loginBar(user)
    }

    return (
        <div>
            {localStorage.loggedIn === 1 && <Redirect to="/bars" />}

            <div
                className="w3-cotainer w3-display-middle w3-center"
                style={{ width: '370px' }}
            >
                <img
                    className="w3-image w3-margin-bottom"
                    style={{ width: '100px' }}
                    src={Logo}
                    alt="Logo"
                />
                <form
                    onSubmit={handleSubmit(onSubmit)}
                >
                    <div className="w3-display-container">
                        <i className="fas fa-user fa-lg w3-text-teal w3-display-right w3-margin-right"></i>

                        <input
                            type="text"
                            name="email"
                            className="w3-input w3-round-large w3-margin-top"
                            placeholder="Correo electrónico"
                            value={user.email}
                            onChange={onChange}
                            ref={register({ required: "Debe ingresar un E-mail" })}
                        />
                    </div>

                    <div className="w3-display-container">
                        <i className="fas fa-key fa-lg w3-text-teal w3-display-right w3-margin-right"></i>

                        <input
                            type="password"
                            name="password"
                            className="w3-input w3-round-large w3-margin-top"
                            placeholder="Password"
                            value={user.password}
                            onChange={onChange}
                            ref={register({ required: "Debe ingresar una contraseña" })}
                        />
                    </div>
                    <button
                        type="submit"
                        className="w3-button w3-block w3-teal w3-round-large w3-margin-top"
                    >
                        Ingresar
                </button>

                    {errors.name && <Error error={errors.name.message} />}

                </form>
            </div>
        </div>
    )
}

const mapStateToProps = state => {
    console.log(state)
    return {
        user: state.auth.user,
        token: state.auth.token,
        loggedIn: state.auth.loggedIn,
    }
}

const mapDispatchToProps = {
    onChange: AuthActions.onChange,
    loginBar: AuthActions.loginBar
}

export default connect(mapStateToProps, mapDispatchToProps)(AuthLogin)

1 respuesta 1

0

El problema viene por el renderizado condicional del Redirect en el componente AuthLogin.js. Cuando se renderiza el componente, la condición no se cumple, luego el usuario hace login, el componente no se vuelve a renderizar y la condición sigue sin cumplirse, por eso no redirige a /bars.

El problema es que estás usando el localStorge como condición en la vista y esté carece de data-binding. Para eso tenemos el state (ya sea el propio estado del componente o el estado redux).

Cambia esto

{localStorage.loggedIn === 1 && <Redirect to="/bars" />}

Por esto

{props.loggedIn === 1 && <Redirect to="/bars" />}
2
  • Hola Marc! Gracias por la respuesta. Entiendo esto que me comentas. Ahora si actualizo la web, props.loggedIn me va a devolver 0 como en el estado inicial. Imagino que debería guardar loggedIn tambien en localStorage para que quede persistente. Ahora como harías para mantener sincronizados localStorage.loggedIn y props.loggedIn? Lo harías en el hook useState por ejemplo? el 18 may. 2020 a las 13:24
  • Yo añadiría el token en el localstorage cuando haces login y si el login es correcto despachas el objeto user que te devuelve la api (en el initalstate, user lo declaras null). Eso lo primero. Luego con el hook de efecto (cada vez que el componente se monte) mandas el token del localstorage a la api y despachas el user. En el renderizado condicional pones { props.user && <Redirecr.... } el 18 may. 2020 a las 16:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.