[英]Call Laravel 8 login API with VueJS 3 App
我是 VueJs 编程的新手,我正在制作一个简单的应用程序,它允许用户登录并在经过身份验证后在表中显示服务列表。
我通过 Laravel 管理身份验证,然后公开从 VueJS 应用程序调用的 API(使用 Insomnia 测试并正常工作)。
所以我在我的 Vue 项目中创建了一个名为LoginPage.vue
的组件,并在其中调用 API 进行登录。 为此,我已在线阅读文档和示例。
我有这个问题,当我填写登录表单并单击浏览器上的Login
按钮打开开发人员工具时,在控制台中出现错误 404。
没有使用 vue 的经验,我无法理解可能是什么问题。
我感谢任何建议或建议
<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>
首先,您在创建的生命周期钩子中有您的 api 调用,您想要的是将 api 调用绑定到在表单中单击的按钮。 我也没有在您的数据对象中看到任何模型。 您使用的 fetch api 错误,让我解释一下:
步骤:
email
和password
用户对象,并将其放入您的数据对象中。submit.prevent
您需要在表单中添加一个类型为submit
的按钮submit.prevent
在表单这是一个带有测试 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.