Can the Vue instance be accessed in Axios interceptors?

Question

Can the Vue instance be accessed in Axios interceptors?

I've integrated vue-reactive-storage to have a reactive alternative to localStorage in my Vue application. This plugin creates a vue object that is accessible to all components. I'm facing an issue when trying to access this object within my axios interceptors response function, as I keep getting the error message

TypeError: Cannot read property 'localStorage' of undefined

.

Here's a snippet from my app.js:

require('./bootstrap');

import Vue from 'vue';
import Vuetify from 'vuetify';
import reactiveStorage from "vue-reactive-storage";
import store from './store/index';

Vue.use(Vuetify);
Vue.use(reactiveStorage, {
  "snackBar": {show: false, text: '(Initial snackbar text.)', type: 'info', timedelay: 2000},
});

axios.interceptors.response.use(response => response, error => {
    this.localStorage.snackBar.text = error.response.data.message || 'Request error status: ' + error.response.status,
    this.localStorage.snackBar.type = 'error'
    this.localStorage.snackBar.show = 'true'
})

import router from './routes';

const app = new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    router,
    store,
    }
});

Is there a way around this issue?

This setup is on Laravel v6.4.1 and Vue v2.6.10.

javascript vue.js axios

Answer 1

Answer №1

Have you considered leveraging the power of Vuex store? It offers reactivity that can greatly benefit your project. Additionally, integrating a plugin for interceptors is quite simple as shown below:

export default function ({ $axios, store, redirect, context }) {
    $axios.onResponse(response => {
    // Insert your code here
    store.commit('set_sample_data', response.data)
})
}

Answer 2

Have you considered leveraging the power of Vuex store? It offers reactivity that can greatly benefit your project. Additionally, integrating a plugin for interceptors is quite simple as shown below:

export default function ({ $axios, store, redirect, context }) {
    $axios.onResponse(response => {
    // Insert your code here
    store.commit('set_sample_data', response.data)
})
}

Answer 3

Answer №2

You can achieve this by utilizing a traditional function declaration and assigning it to the prototype, allowing the function to inherit the context binding of your Vue instance. More details can be found here.

Answer 4

You can achieve this by utilizing a traditional function declaration and assigning it to the prototype, allowing the function to inherit the context binding of your Vue instance. More details can be found here.

Can the Vue instance be accessed in Axios interceptors?

Answer №1

Answer №2

Similar questions

Attempting to retrieve a state object within the mounted lifecycle hook of my Vue component

Can ajax requests be made without a web browser?

Guide to transferring a PHP variable from a loop and converting it into a JavaScript variable

How can we avoid multiple taps on Ext.Button in Sencha Touch?

Failure in Retrieving Fresh Information via Ajax Call

Refresh Form (Reactive Forms)

Executing functionality based on changes in Angular bindings

Transferring PHP and JavaScript variables via AJAX to PHP page and storing in MySQL database table

Link together a series of AJAX requests with intervals and share data between them

Youtube video embedding showing cut edges on smaller screens

Get the username from Parse instead of using the ObjectID

Switch the ng-bind-html option

Variable remains unchanged by method

Determining the worth of radio buttons, dropdown menus, and checkboxes

Utilizing ReactJS and Gatsby Js: How to pass the value of a child component to the parent component to create a button

Ways to troubleshoot and resolve the jQuery error with the message "TypeError: 'click' called"

Exploring Next.js with getServerSideProps

When going through an array using jquery, only the final object is returned

Is there a way to incorporate electron methods within Svelte files, specifically in Svelte 3, or is there an alternative approach to achieve this integration?

Utilizing various AngularJS filters with multiple input sources