Invoking Vuex mutation inside an Axios interceptor

Question

Invoking Vuex mutation inside an Axios interceptor

Is it possible to trigger a mutation from an interceptor in Vue? Specifically, I want to trigger the logout mutation whenever Axios encounters an http 403 error.

I have imported Vuex mutations and mapped them as I usually do, but I am struggling to access them within the Axios interceptor error function. I have added my interceptor configuration in the created() method of App.vue.

I have attempted solutions from other sources without success, possibly because my project uses modules and the Axios config is within a created() method.

This Reddit thread discusses Axios config in a separate file - is this recommended?
This Stack Overflow question addresses accessing Vuex storage mutation inside Axios interceptor without using modules.

App.vue

<script>
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  created(){
    axios.interceptors.response.use(
      function (response) {
        return response;
      }, 
      function (error) {
        if (error.response.status === 403) {
          this.logout()
            .then(() => {
              this.$router.push("/");
            })
        }
    });
  }
}
</script>

EDIT Here is a screenshot of the results based on the provided answers: https://i.sstatic.net/uryJP.png

javascript vue.js axios vuex

Answer 1

Answer №1

You're almost there. The key issue is that you were defining functions using the function() {} syntax instead of the "fat-arrow" function syntax, which was creating a different scope (this was affected). Take a look at the comparison between the two approaches below.

// Original script
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  created(){
    axios.interceptors.response.use(
      function (response) {
        return response;
      }, 
      function (error) {
        if (error.response.status === 403) {
          this.logout()
            .then(() => {
              this.$router.push("/");
            })
        }
    });
  }
}

// Updated version
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  mounted() {
    axios.interceptors.response.use(
      (response) => response, 
      (error) => {
        if (error.response.status === 403) {
          return this.logout()
            .then(() => this.$router.push("/"));
        }
        else {
          return Promise.reject(error);
        }
    });
  }
}
</script>

Answer 2

You're almost there. The key issue is that you were defining functions using the function() {} syntax instead of the "fat-arrow" function syntax, which was creating a different scope (this was affected). Take a look at the comparison between the two approaches below.

// Original script
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  created(){
    axios.interceptors.response.use(
      function (response) {
        return response;
      }, 
      function (error) {
        if (error.response.status === 403) {
          this.logout()
            .then(() => {
              this.$router.push("/");
            })
        }
    });
  }
}

// Updated version
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  mounted() {
    axios.interceptors.response.use(
      (response) => response, 
      (error) => {
        if (error.response.status === 403) {
          return this.logout()
            .then(() => this.$router.push("/"));
        }
        else {
          return Promise.reject(error);
        }
    });
  }
}
</script>

Answer 3

Answer №2

To correctly access `this`, you will need to either utilize an arrow function or bind the this context to your function.

<script>
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  created(){
    axios.interceptors.response.use(
      function (response) {
        return response;
      }, 
      (error) => {
        if (error.response.status === 403) {
          this.logout()
            .then(() => {
              this.$router.push("/");
            })
        }
      }
    );
  }
}
</script>

or

<script>
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  created(){
    axios.interceptors.response.use(
      function (response) {
        return response;
      }, 
      function (error) {
        if (error.response.status === 403) {
          this.logout()
            .then(() => {
              this.$router.push("/");
            })
        }
      }.bind(this)
    );
  }
}
</script>

Answer 4

To correctly access `this`, you will need to either utilize an arrow function or bind the this context to your function.

<script>
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  created(){
    axios.interceptors.response.use(
      function (response) {
        return response;
      }, 
      (error) => {
        if (error.response.status === 403) {
          this.logout()
            .then(() => {
              this.$router.push("/");
            })
        }
      }
    );
  }
}
</script>

or

<script>
import { mapMutations } from "vuex";
import axios from 'axios';
export default {
  methods: {
    ...mapMutations(["logout"])
  },
  created(){
    axios.interceptors.response.use(
      function (response) {
        return response;
      }, 
      function (error) {
        if (error.response.status === 403) {
          this.logout()
            .then(() => {
              this.$router.push("/");
            })
        }
      }.bind(this)
    );
  }
}
</script>

Invoking Vuex mutation inside an Axios interceptor

Answer №1

Answer №2

Similar questions

The issue arises when attempting to populate the Facebook login window after clicking the 'like' button in Selenium webdriver

Is there a way to trigger a CSS3 animation to play when scrolling down and then play in reverse when scrolling up?

Tips for incorporating the "build" directory into the Travis-CI build process and deployment of an npm module

Route fallback not yet resolved

Using a JavaScript onclick function to retrieve specific elements within the document

Modifying the style of a specific row when the form is submitted

The functionality of if and else statements within local storage is not functioning as

Preloading not working in Bootstrap Ajax Tabs

Limitations of jQuery: onClick function not transferable

Vue.js is unable to render the template using Object

What is the process for checking the selected option, retrieving an array value, and displaying it in a div by clicking a button?

Styling Icons for Tabs in Material UI

Leveraging a partial view across two different perspectives

how to open a new tab using JavaScript with Selenium

Unable to display Boostrap modal upon clicking href link

How can I retrieve all the completed tasks using the Todoist API?

Guide to displaying the object response on the UI in a ReactJS application

How can I use Express.js to send an image file instead of a binary file?

Issue: ui-route failing to function properly when the href attribute is utilized

NodeJS Fork - React each instance a new line is detected from the child process