Soy un tipo de back-end que quiere obtener algunas habilidades de Vue.js. En mi aplicación, tengo Ruby on Rails como backend y Vue.js como front-end con un flujo de token JWT estándar. Estoy tratando de enviar una solicitud POST ( fetchAllProductsRequest ) al backend que activará un trabajo en segundo plano usando el siguiente código:

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) };

Sorprendentemente, recibo un error: la Request failed with status code 401 . Cuando lo depuro en el lado del backend, veo que envío un token vacío dentro del encabezado:

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

Aquí hay una función que activa fetchAllProductsRequest que es responsable de la solicitud POST:

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>

¿Qué me perdí?