Question

我想从拦截器内部触发突变。在这种情况下，只要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/ <-单独文件中的Axios配置，这是最佳做法吗？
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() {}声明来声明函数，而不是使用“ 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>

Answer 2

您将需要使用箭头函数或将此上下文绑定到您的函数，以便正确访问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>

在Axios拦截器中调用Vuex mutator

2 个答案: