在 Axios 拦截器中调用 Vuex mutator答案

【问题标题】：Calling Vuex mutator within Axios interceptor在 Axios 拦截器中调用 Vuex mutator
【发布时间】：2020-09-20 22:25:20
【问题描述】：

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

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

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

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>

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

【问题讨论】：

您在控制台中看到任何错误吗？此外，您可能希望使用箭头函数作为 this 的拦截器回调来引用 Vue 实例。

标签： javascript vue.js axios vuex

【解决方案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>

【讨论】：

出于某种原因，这仍然是未定义的。我在调试中添加了一个镜头。
@Half_Duplex => 我进行了编辑，但它仍然不存在的原因是因为您选择了 Lifecycle Hook。您需要将其从 created() 更改为 mounted()。

【解决方案2】：

您需要使用箭头函数或将 this 上下文绑定到您的函数才能正确访问 this

<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>

或

<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>

【讨论】：

出于某种原因，这仍然是未定义的。我在调试中添加了一个镜头。