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

Question

我想从拦截器内触发突变。在这种情况下，只要 Axios 遇到 http 403，就会触发 logout 突变。

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

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

1. https://www.reddit.com/r/vuejs/comments/eq5eej/question_how_to_access_vuex_store_modules_mode_in/ <- Axios 配置在单独的文件中，这是最佳实践吗？
2. 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>

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

Answer 1

你很接近。唯一阻止您的是您使用 function() {} 声明函数。声明，而不是“胖箭头”函数声明，它创建了一个新的作用域( 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>