Блог

Итак, после отправки успешного POST-запроса с помощью axios в Django rest API для токенов я получаю ответ 200 с токенами обновления и доступа, которые хранятся в локальном хранилище. Проблема в том, что есть второй POST-запрос, который также успешно выполняется на вкладке сеть. Почему есть 2 запроса 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>
  

Ваша проблема здесь:

 <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>