PortaFront/src/view/login.vue

<template>
  <div>
    <Header />
    <h1 class="my-5">Inicia Sesión</h1>
    <div class="row d-flex justify-content-center">
      <div class="col-12 col-md-8 col-lg-6 col-xl-6">
        <form class="row d-flex justify-content-center">
          <input
            type="text"
            v-model="data.email"
            id="login"
            class="form-control col-8"
            name="login"
            placeholder="Usuario"
          />
          <input
            type="password"
            v-model="data.password"
            id="password"
            class="form-control col-8 my-3"
            name="login"
            placeholder="Contraseña"
          />
          <input
            type="button"
            @click="login"
            class="btn bg-primary text-white col-5"
            value="Ingresar"
          />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "./../components/header.vue";
import axios from "axios";
import config from "../config/config.js";
import Swal from 'sweetalert2'
export default {
  data() {
    return {
      data: {
        email: "",
        password: ""
      }
    };
  },
  methods: {
    login() {
      const data = {
        usuario: this.email,
        password: this.password
      }
      axios.post( `${config.api}/loginAdmin`,  data ).then(async response =>{
          localStorage.setItem('tokenPortal', response.data.token);
          localStorage.setItem('userNamePortal', response.data.user);
          await Swal.fire(
                'Bienvenido',
                    '',
                    'success'
                );
          this.$router.replace('/portalAdmin');

      }).catch(() =>{
          Swal.fire({
              icon: 'error',
              title: 'El usuario o la contraseña es incorrecta',
              text: `Intentalo de nuevo.`,
          });
      });
    }
  },
  components: {
    Header
  },
 
};
</script>

<style></style>