How to send a post request and write the received jwt token to the headers?

Question

Vue.js

How to send a post request and write the received jwt token in the headers?

<template>
  <form action="submit">
    <label for="login">
      <input type="text" id="login" v-model="username" />
    </label>
    <label for="password">
      <input type="text" id="password" v-model="password" />
    </label>
  </form>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      username: "admin",
      password: "123456",
    };
  },
  methods : {
      ???
  }
};
</script>

Answer 1

For example using AXIOS.
You can add a field to the header via axios.defaults.headers.common
There will be something like this:

methods : {
  sendCredentials() {
        axios.post('http://URL/', {
            username: this.username,
            password: this.password
        })
         .then((response) => {
             axios.defaults.headers.common.['Authorization'] = response.data.TOKEN; 
        })
         .catch((error) => {
            console.log(error);
      });
  },
}