Vue3 ejemplo formulario básico de login usando fetch api y sweetalert
Template básico de formulario de acceso con email y contraseña en Vue 3
Código html con librería de Vue 3 y Sweet Alert 2
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<div id="div-app">
<form @submit.prevent="onSubmit">
<div>
<label for="email">Email *</label>
<input type="email" id="email" v-model="email" placeholder="Email con el que te has registrado" required>
</div>
<div>
<label for="password">Contraseña *</label>
<input id="password" type="password" v-model="password" placeholder="Clave alfanumérica > 10 caracteres" required>
</div>
<div>
<button :disabled="issending" >
{{btnsend}}
<img v-if="issending" src="/231117-loading.png" width="25" height="25"/>
</button>
</div>
</form>
</div>
<!-- /app-->
<script type="module">
//este código lo dejo más abajo
</script>
Código JS
//en esta url se comprobará si los datos son correctos
const URL_LOGIN_CHECKER = "/login/access-checker"
//si los datos permiten el acceso, despues de la respuesta de confirmación se redirigirá
//al panel principal
const URL_ACCESS_OK = "/dashboard"
const App = {
data() {
return {
//al cargar la página, como el back está en php, asigno el token de protección de CSRF
//Cross-site request forgery Falsificación de petición entre sitios
_csrf: "",
email: "",
password: "",
//esta variable desactiva el botón de submit y muestra el spinner
//mientras se está realizando la llamada ajax
issending: false,
btnsend: "Enviar"
}
},
methods: {
onSubmit() {
this.issending = true
this.btnsend = "Enviando..."
fetch(URL_LOGIN_CHECKER, {
method: "post",
headers: {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/json"
},
body: JSON.stringify({
_csrf: this._csrf,
email: this.email,
password: this.password,
})
})
.then(response => response.json())
.then(response => {
this.issending = false
this.btnsend = "Enviar"
if(response?.errors?.length)
//esto son errores controlados. No excepciones.
//la contraseña no cumple con la longitud, el email no existe, cuenta desactivada, CSRF incorrecto, etc
return Swal.fire({
icon: "warning",
title: "Hay un problema con los datos de acceso",
html: response.errors.join("
"),
})
Swal.fire({
icon: "success",
title: "Acceso concedido",
html: "...redirigiendo al panel de control",
})
//en este punto se ha iniciado una sesion en el backend
//espero 1 segundo antes de hacer la redirección
setTimeout(()=> window.location = URL_ACCESS_OK, 1000)
})
.catch(strerror => {
//Estos son errores inesperados, por ejemplo que el servidor no haya contestado
//en formato json, que ha dado timeout, alguna excepción del tipo 50x, etc
Swal.fire({
icon: "error",
title: "Vaya! Algo ha ido mal",
html: "No se ha podido procesar el acceso.
".concat(strerror),
})
})
.finally(()=>{
this.issending = false
this.btnsend = "Enviar"
})
}//onSubmit
}//methods
}//App
Vue.createApp(App).mount("#div-app")
Autor: Eduardo A. F.
Publicado: 23-11-2021 23:53