为什么只有两个POST执行，而我只发送一次?Vue 3 Composition API，Django REST JWT

Question

因此，在使用axios向Django rest API发送成功的POST请求以获取令牌后，我得到了200个带有刷新和访问令牌的响应，这些令牌存储在本地存储中。问题是有第二个POST请求，在网络选项卡中也是成功的。为什么我只提交一次表单就有两个POST请求？

<template>
<div>
auth 1
<div id="authenticationDiv">
<form action="" v-on:submit.prevent="loginUser(username, password)">
<!-- <input type="text" v-model="username" /> -->
<!-- <input type="text" v-model="password" /> -->
<button @click="loginUser(username, password)">
login
</button>
</form>
</div>
<div></div>
</div>
</template>
<script>
import { ref } from "vue";
import axios from "axios";
export default {
setup() {
const username = ref("aleksisDjango");
const password = ref("zimbabwe123");
const ACCESS_TOKEN = "access_token";
const REFRESH_TOKEN = "refresh_token";
const TOKEN_URL = "http://127.0.0.1:8000/api/token/";
const tokenRequest = axios.create({
baseURL: TOKEN_URL,
timeout: 5000,
headers: {
"Content-Type": "application/json",
accept: "application/json",
},
});
const loginUser = (username, password) => {
const loginBody = { username, password };
return tokenRequest
.post("http://127.0.0.1:8000/api/token/", loginBody)
.then((response) => {
window.localStorage.setItem(ACCESS_TOKEN, response.data.access);
window.localStorage.setItem(REFRESH_TOKEN, response.data.refresh);
// console.log(response.data)
console.log("done");
// this line is executed twice in the command line
return Promise.resolve(response.data);
})
.catch((error) => {
console.log(error);
return Promise.reject(error);
});
};
return {
username,
password,
loginUser,
};
},
};
</script>
<style scoped>
#authenticationDiv {
margin: 20px 50px;
}
</style>

Answer 1

您的问题在这里：

<form action="" v-on:submit.prevent="loginUser(username, password)">
<!-- <input type="text" v-model="username" /> -->
<!-- <input type="text" v-model="password" /> -->
<button @click="loginUser(username, password)">
login
</button>
</form>

当您单击button时，您正在提出一个请求，当提交表单时，您将提出另一个请求。要解决任一问题：

<form action="" v-on:submit.prevent="loginUser(username, password)">
<!-- <input type="text" v-model="username" /> -->
<!-- <input type="text" v-model="password" /> -->
<button>
login
</button>
</form>

或

<form action="#">
<!-- <input type="text" v-model="username" /> -->
<!-- <input type="text" v-model="password" /> -->
<button @click="loginUser(username, password)">
login
</button>
</form>