I'm backend guy who wants to gain some Vue.js skills. In my app I've got Ruby on Rails as backend and Vue.js as front-end with a standard JWT token flow. I'm trying to send a POST request (fetchAllProductsRequest) to the backend that will trigger some background job using below code:

index.js

const fetchAllProductsRequest = (self) => {
  const jwtToken = self.$store.state.idToken;

  return axios
    .post(`/api/v1/imports/products/fetch_all`,{
      headers: {
        Authorization: `Bearer ${jwtToken}`,
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
    .then(response => response.data)
};

Quite surprisingly I get an error: Request failed with status code 401. When I debugging it on the backend side I see that I send an empty token inside the header:

[1] pry(#<Api::V1::Imports::ProductsController>)> params[:headers]
=> #<ActionController::Parameters {"Authorization"=>"Bearer null", "Content-Type"=>"application/json", "Accept"=>"application/json"} permitted: false> 

Here is a function that triggers fetchAllProductsRequest which is responsible for POST request:

fetch_all.vue

<script>
import {
  fetchAllProductsRequest,
} from '../../api/imports'

import ModalController from '../general/modal_controller'

export default {
  name: 'BackboneFetchAll',
  data() {
    return { }
  },
  components: {
    MoonLoader
  },
  computed: {
    databaseSyncInProgress() {
      return this.$store.getters.getDatabaseSyncStatus;
    },
  },
  methods: {
    async syncAll() {
      let confirmationText = `Do you want to sync all Backbone products?`

      if (await ModalController.showConfirmation('Confirmation', confirmationText)) {
        try {
          ModalController.showLoader()
          await fetchAllProductsRequest(this)
          this.$store.commit('setSyncingProductsInProgress', value)
          const successMessage = `Database synchronization has been queued`
          await ModalController.showToast('', successMessage)
        } catch (data) {
          const errorMessage = `Error occurred during queueing products to sync - `
          ModalController.showToast('', errorMessage + data?.message, 'error')
        } finally {
          ModalController.hideLoader()
        }
      }
    },
  }
}
</script>

What did I missed?