Problems logging in with Vue, Vuex, Xios and Laravel

Asked

Viewed 207 times

0

I’m trying to log in an application that uses the Windows as back/api and the front with Vue/vuex/Vue-router, but when receiving the token I can’t keep the status in the store after updating the page, the status only continues with the user if I change the page via router-link. The Login.Vue component looks like this:

<template>
...
</template>

<script>
export default {
    data() {
        return() {
            form: {
                email: '',
                password: '',
            }

        }
    },
    computed: {
        stateUser() {
            return this.$store.state.user
        },
        getUser() {
            return this.$store.getters.getUser
        }
    },

    created() {
        console.log("USUARIO ", this.getUser)
    },

    methods: {
        doLogin(){
            axios.post('/api/login', this.form)
            .then(response => {

                 // efetua o login caso a api retorne o token
                if (response.data.token) {

                    sessionStorage.setItem('user', JSON.stringify(response.data))

                    this.$store.commit('SET_USER')
                    console.log(this.getUser)

            })
            .catch(error => {
                console.error(error)
            });
        }

}
<script>

All this process is working, by checking the active sessions in the browser it is there created normally

The problem occurs when I refresh the page, at this time mine state user. goes back to being false, she ends up losing the status data.. follows my store.js


import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const state = { 
    user: false,
}

const mutations = {

    SET_USER (state) {

        const userSession = JSON.parse(sessionStorage.getItem('user'));

        if (userSession) {
            state.user = {
                id: userSession.id,
                name: userSession.name,
                email: userSession.email,
                token: userSession.token,
            }
        }
    },


    UNSET_USER(state) {
        sessionStorage.clear();
        state.user = false;
    }

}


const getters = {
    getUser(state) {
        return state.user;
    }
}


export default new Vuex.Store({
  state,
  mutations,
  getters,
})

I am using the Laravel’s Passport and is returning the token normally. The problem is even the moment I access another page via url or update the page causing the state not to keep the data

If anyone can indicate any tutorial or reference for this problem

Thank you very much

laravel vue.js session login vuex

  • You have to save the login data somewhere (Cookie, Web Storange, Local Storange, etc.) because when the user updates the page he "cleans" the status, the information that is in vuex. Usually logic is something like, log in, save the data somewhere you can recover later, saved in vuex. A refresh has occurred recovers the saved login data, if it is ok follows, if it is not redirects to the login screen.

  • I’m saving it in sessionStorage and picking up on Mutation SET_USER but it’s not maintained yet

1 answer

1

Voce is using getItem, it is to capture the data and not write.. try to sessionStorage.setItem('chave', 'valor');

put the chave as 'user' and in the value vc puts the object with the user data :D

Browser other questions tagged laravel vue.js session login vuex

You are not signed in. Login or sign up in order to post.