After successfully sending a POST request with axios to the Django REST API for tokens, I receive a 200 response containing refresh and access tokens that are then stored in local storage. However, upon inspection of the network tab, I noticed there is a second successful POST request being made. Why is this happening when I only submitted the form once?
<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>