web-dev-qa-db-ja.com

Vue.jsおよびAxios-401でリダイレクト

Vue.jsとaxiosで、次のような汎用APIオブジェクトを作成しようとしています。

import router from './router'
import auth from './auth'
const axios = require('axios')

export const API = axios.create({
  baseURL: `https://my-api.com/`,
  headers: {
    Authorization: auth.getToken()
  }
})

API.interceptors.response.use(null, function (error) {
  if (error.response.status === 401) {
    console.log('Failed to login')
    router.Push('/Login')
  }
  return Promise.reject(error)
})

私はシングルページアプリで、Login画面にユーザーをリダイレクトさせようとしていますが、401エラーコードが受信されます。しかし、リダイレクトされないため、Chromeの開発ツールでエラーは発生しません。 console.log with Failed to login。

vue.jsaxiosvue-router
8
Alfred Balle

同様の状況を検出しました。私はこのコードで修正しました：

import router from 'router'
import store from 'store'
...
...
axios.interceptors.response.use(function (response) {
  return response
}, function (error) {
  console.log(error.response.data)
  if (error.response.data.error.statusCode === 401) {
    store.dispatch('logout')
    router.Push('/login')
  }
  return Promise.reject(error)
})
6
Rubén Pozo

次のようなことができます：

axios.post("quote", params)
  .catch(function(error) {
    if (error.response && error.response.status === 401) {
      window.location.href = "logon";
    } else {
      // Handle error however you want
    }
  });

ソース： https://github.com/axios/axios/issues/396#issuecomment-3955929

3
Eduardo Cuomo