javascript - 在Axios拦截器中调用Vuex mutator

我想从拦截器内部触发突变。在这种情况下，每当Axios遇到http 403时，触发logout突变。

我导入了Vuex突变并按我在其他地方所做的那样进行了映射，但是我无法在Axios拦截器错误函数中访问它。我已经在App.vue的created()方法中添加了我的拦截器配置。

我尝试了这两个问题的语法，但均未成功，这很可能是由于我的项目使用模块，并且Axios配置位于created()方法中。

https://www.reddit.com/r/vuejs/comments/eq5eej/question_how_to_access_vuex_store_modules_mode_in/

Can't access Vuex storage mutation inside Axios interceptor
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>

编辑
从以下答案中添加结果的屏幕截图

最佳答案

你近了阻止您的唯一事情就是您使用function() {}声明来声明函数，而不是使用“fat-arrow”函数声明来声明函数，后者正在创建新的作用域(this不同)。您应该在下面看到两个更改之间的区别。

// Your current 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
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(err);
        }
    });
  }
}
</script>

关于javascript - 在Axios拦截器中调用Vuex mutator，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62152218/