[英]Call Laravel 8 login API with VueJS 3 App
I'm new to programming with VueJs, and I'm making a simple app that allows the user to login and once authenticated show a list of services in a table.我是 VueJs 编程的新手,我正在制作一个简单的应用程序,它允许用户登录并在经过身份验证后在表中显示服务列表。
I manage authentication through Laravel, then I expose APIs (tested with Insomnia and working correctly) that I call from my VueJS application.我通过 Laravel 管理身份验证,然后公开从 VueJS 应用程序调用的 API(使用 Insomnia 测试并正常工作)。
So I made in my Vue project a component called LoginPage.vue
and in which I call the API for login.所以我在我的 Vue 项目中创建了一个名为
LoginPage.vue
的组件,并在其中调用 API 进行登录。 To do this I have read documentation and examples online.为此,我已在线阅读文档和示例。
I have this problem, when I fill in the login form and click on the Login
button on the browser opening the developer tools, in the console I have error 404.我有这个问题,当我填写登录表单并单击浏览器上的
Login
按钮打开开发人员工具时,在控制台中出现错误 404。
Having no experience with vue I cannot understand what the problem may be.没有使用 vue 的经验,我无法理解可能是什么问题。
I appreciate any advice or suggestions我感谢任何建议或建议
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>Compila il form sottostante con le tue credenziali per effettuare il login</p>
<div>
<form v-on:submit.prevent="loginForm">
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Immetti la tua mail"
id="mail"
v-model="mail"
>
</div>
<div class="form-group">
<input
type="password"
class="form-control"
placeholder="Immetti la tua password"
id="psw"
v-model="psw"
>
</div>
<button class="btn btn-primary">Login</button>
</form>
</div>
<p>oppure accedi con la tua identità digitale SPID</p>
<div> TODO - SPID BUTTON HERE</div>
</div>
</template>
<script>
export default {
name: "LoginPage",
props: {
msg: String,
},
data() {
return {
info: null
};
},
created() {
// Simple POST request with a JSON body using fetch
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" }
};
fetch("http://localhost:8000/api/login", requestOptions)
.then(response => response.json())
.then(data => (this.info = data));
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
First of all you have your api call in the created lifecycle hook and what you want is to bind the api call to the button clicked in your form.首先,您在创建的生命周期钩子中有您的 api 调用,您想要的是将 api 调用绑定到在表单中单击的按钮。 I also don't see any models in your data object.
我也没有在您的数据对象中看到任何模型。 You are using the fetch api wrong, let me explain:
您使用的 fetch api 错误,让我解释一下:
The steps:步骤:
email
and password
and put that in your data object.email
和password
用户对象,并将其放入您的数据对象中。submit.prevent
you will need to add a button in the form with the type submit
submit.prevent
您需要在表单中添加一个类型为submit
的按钮submit.prevent
in your formsubmit.prevent
在表单Here is an example with a test api:这是一个带有测试 api 的示例:
const template = ` <div> <form class="login-form" @submit.prevent="doLogin"> <div class="form-field"> <input type="text" placeholder="Email" v-model="user.email" /> </div> <div class="form-field"> <input type="password" placeholder="Wachtwoord" v-model="user.password" /> </div> <div class="form-action"> <button class="login-btn" type="submit">Submit</button> </div> </form> <span v-if="loading && !show">Loading...</span> <div v-else-if="show"> <p>Login success: {{ successMessage }}</p> <p>Token: {{ token }} </p> </div> </div> `; const LoginForm = { name: 'LoginForm', data() { return { user: { email: 'eve.holt@reqres.in', password: 'cityslicka' }, show: false, loading: false, successMessage: '', token: '' } }, template, methods: { async postData(url = '', data = {}) { const response = await fetch(url, { method: 'POST', // *GET, POST, PUT, DELETE, etc. headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); return response.json(); // parses JSON response into native JavaScript objects }, doLogin() { this.loading = true this.postData('https://reqres.in/api/login', this.user) .then(data => { const { token } = data; this.token = token; this.successMessage = 'Yes sir!'; this.loading = false; this.show = true; }); } } }; new Vue({ el: '#root', components: { LoginForm }, template: `<LoginForm />` })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.