Vuex에서 404 페이지 표시로 Axios 오류 포착

Vuex에서 404 페이지 표시로 Axios 오류 포착

백엔드용 장고 Rest Framework와 프론트엔드용 Vue 3을 사용하여 앱을 구축하고 있습니다.프로젝트에서 Vuex 및 Vue Router를 사용하고 Axios를 사용하여 Vuex 작업 내에서 API를 사용합니다.하지만 백엔드에서 가져오기가 실패했을 때 404 페이지를 표시하는 방법을 알 수 없었습니다.라우터를 vuex로 가져오고 오류를 감지하는 것과 같은 몇 가지 방법을 시도했습니다.router.push({name: 'notfound'})하지만 효과가 없었습니다.이것을 어떻게 달성할 것인지에 대해 생각이 있으십니까?

router/index.js

...
  {
    path: '/route/:category',
    name: 'filteredterms',
    component: Home
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'notfound',
    component: NotFound
  }

store/index.js

import router from "../router/index.js"
...
    async exampleFunc({commit}){
      const response = await axios.get(`http://127.0.0.1:8000/api/exampleEndpoint`)
      .then(response => {
        commit('exampleMutation', response.data)
      })
      .catch(error => {
        if (error.response.status == 404){
          router.push({name: 'notfound'})
      }

사용할 수 있습니다.interceptor전 세계적으로 이를 달성하기 위해 공리들로부터 패턴:

import router from 'path/to/your/router'

axios.interceptors.response.use( 

  //successful callback, we don't need to do anything
  (response) => {
    return response
  }, 

  //check if we received a 404 and redirect
  (error) => {
    if (error.response.status === 404) {
      router.push({name: 'notfound' })
    } else {
      return Promise.reject(error)
    }
  }
)

언급URL : https://stackoverflow.com/questions/66765313/catch-axios-error-within-vuex-to-show-404-page