Как остановить выполнение кода после перехода на страницу с ошибкой из vuex? - PullRequest
Новая
       15

Как остановить выполнение кода после перехода на страницу с ошибкой из vuex?

0 голосов
/ 25 мая 2020

У меня есть страница корзины, написанная с помощью VueJs и Vuex. У меня есть файл api, который действует как оболочка вокруг ax ios.

В моем действии vuex я вызываю API, и, если он был успешным, я передаю данные в свою мутацию. 

async await mounted () {
   const result = this.getStatus()
   if (result === "locked") {
      this.$router.push({name: "LockedPage"}
   }
   else if (result === "expired") {
      this.$router.push({name: "SessionExpiredPage"}
   }

   doSomething(result)
},
methods: {
  function doSomething(res) {
    // does something with result
  }
}

Функция getStatus взята из моего действия vuex. 

     const {authid, authpwd} = router.history.current.params
     if (!authid || !authpwd) {
       router.push({name: "SomethingWrong"})
       return
     }
     const res = await api.getStatus 
     commit("SET_STATUS", res.status)
     if (res.otherLogic) {
       //commit or trigger other actions
     }

     return status
   }

Какой идеальный способ справиться с подобными ошибками API? Если вы посмотрите, то увидите, что я выполняю маршрутизацию внутри установленного хука внешнего компонента, а также внутри самого действия vuex. Должна ли вся маршрутизация для этой функции состояния происходить внутри действия vuex?

Я думаю, как это в настоящее время настроено, когда маршрутизируется SomethingWrong page get. Он все равно вернет выполнение функции mounted. Так что технически функция doSomething все еще может быть вызвана, но я думаю, с неопределенными значениями. Это кажется плохим. Есть ли способ остановить выполнение кода после того, как мы перенаправим пользователя на страницу с ошибкой? Было бы лучше выдавать ошибку после маршрутизации страницы?

1 Ответ

0 голосов
/ 26 мая 2020

Для общих ошибок, таких как истекшая сессия, я бы рекомендовал обрабатывать их на низком уровне на уровне ax ios, используя перехватчик. https://github.com/axios/axios#interceptors

Перехватчики могут быть определены, например. в плагинах. Добавление плагина Nuxt в качестве примера (Vue без Nuxt будет использовать немного другое определение плагина, но все же оно должно быть полезно в качестве вдохновения) (Также окно имеет доступ, потому что фрагмент из приложения SPA - без рендеринга на стороне сервера) 

export default ({ $axios, redirect }) => {
  $axios.onError((error) => {
    const code = parseInt(error.response && error.response.status)
    if (code === 401) {
      // don't use route path, because error is happending before transition is completed
      if (!window.localStorage.getItem('auth.redirect')) {
        window.localStorage.setItem('auth.redirect', window.location.pathname)
      }
      redirect('/login-page')
    }
  })
}
...