Axios 인터셉터 내에서 Vuex 변환자를 호출하는 중

Axios 인터셉터 내에서 Vuex 변환자를 호출하는 중

요격체 내부에서 돌연변이를 일으키고 싶다.이 경우, Tahoma9}의logout변환은 Axios가 http 403을 검출할 때마다 발생합니다.

다른 곳에서와 마찬가지로 Vuex 돌연변이를 Import하고 맵을 작성했지만 Axios 인터셉터 에러 함수 내에서 액세스할 수 없었습니다.App.vue의 created() 메서드에 인터셉터 설정을 추가했습니다.

이 두 가지 질문에서 구문을 시도했지만 성공하지 못했습니다.아마도 모듈을 사용한 프로젝트와 Axios Configuration이 다음 위치에 있기 때문입니다.created()방법.

1. https://www.reddit.com/r/vuejs/comments/eq5eej/question_how_to_access_vuex_store_modules_mode_in/ <- Axios config in separate file, 이것이 베스트 프랙티스입니까?
2. Axios 인터셉터 내에서 Vuex 스토리지 변환에 액세스할 수 없음 <- 모듈을 사용하지 않음

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-sign」함수 선언이 아닌 선언(fat-signed function declaration)을 실시합니다.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>

에 액세스 하려면 , 화살표 기능을 사용하거나, 이 콘텍스트를 기능에 바인드 할 필요가 있습니다.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>

언급URL : https://stackoverflow.com/questions/62152218/calling-vuex-mutator-within-axios-interceptor