vitor-login-example.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
 
export default {
  state:{
    usuario: sessionStorage.getItem('usuario') ? JSON.parse(sessionStorage.getItem('usuario')) : null,
    responseLogin: {}
  },
  getters:{
    getUsuario: state =>{
      return state.usuario;
    },
    getToken: state => {
      return state.usuario.token || false;
    },
    getResponseLogin: state  => {
      return state.responseLogin;
    }
  },
  mutations:{
    SET_USUARIO(state, n){
      state.usuario = n;
    },
    SET_RESPONSE_LOGIN(state, n){
      state.responseLogin = n;
    }
  },

  actions:{
    login (context, data) {
      var retorno = {}

      return new Promise((resolve, reject) => {
        axios.post(sessionStorage.getItem('urlAPI') + 'auth/login',data).then(response =>{
          if(response.data.status == true){
            sessionStorage.setItem('usuario', JSON.stringify(response.data.usuario));
            context.commit('SET_USUARIO', response.data.usuario);
            retorno.progressLoader = 100;
            retorno.status = true;
            context.commit('SET_RESPONSE_LOGIN',retorno);
          } else if (response.data.status == false && response.data.validacao){
            let erros = '';
            for(let erro of Object.values(response.data.erros)){
                if(erro != 'no' && erro != 'false'){
                    erros += " - "+ erro + " <br>".replace('<br>', "\n");
                }
            }
            retorno.errorValidation = erros;
            retorno.status = false;
            context.commit('SET_RESPONSE_LOGIN',retorno);
          } else {
            retorno.errorValidation = 'Usuário não existe em nosso banco de dados';
            retorno.status = false;
            context.commit('SET_RESPONSE_LOGIN',retorno);
          }          
          resolve()
        }).catch(e => {
          console.log(e)
          retorno.errorValidation = 'Houve uma falha ao se conectar com servidor';
          retorno.status = false;
          context.commit('SET_RESPONSE_LOGIN',retorno);
          reject()
        });
     });
    }
  },
}
 
 
 
//COMPONENTE
 
login(){
  this.errorLoader = 'info';
  this.loader = true;
  this.progressLoader = 0;
  this.errorValidation = '';
  let data = {};
  data.password = this.password;
  data.email = this.email;
  
  if(this.validation(data)){
    this.progressLoader = 50;
    
    this.$store.dispatch('login',data)
      .then(() => this.$router.push('ROTA_DESTINO_PÓS_LOGIN'))
      .catch(e => console.log(e))

  }else{
    this.errorLoader = 'danger';
    this.progressLoader = 100;
  }

  setTimeout(() => {
    this.loader = false;
  }, 3000);
},