Nuxtでaxiosのエラーハンドリングをグローバルに行う

Nuxtを書いていて、401、500エラーのような対応処理が同じエラーに対しては、プラグインファイルの中で一括で行いたかったので、その方法を調べました。

onErrorヘルパーを使う

例えば認証にJWTを使ってajax通信を行う際、プラグインファイルを作って、interceptor的にresponseヘッダにjwtトークンを埋め込む処理を書くと思います。こんな感じ。

plugins/axios.js

export default ({ $axios }) => {
  $axios.onRequest(config => {
    const accountToken = localStorage.getItem('accountToken')
    if (accountToken) {
      config.headers.common['x-access-token'] = accountToken
    }
  })
}

エラーハンドリングをグローバルに行いたい場合、onErrorヘルパーを使います。

// $axios.onRequest(){...}

$axios.onError(error => {
  if (error.response.status === 401) {
    // 401エラーの場合の処理を書く
  }
})

他にもヘルパーはいくつかあるので、気になる人はaxios公式ドキュメントを読みましょう。
Axios Modules

404エラーのハンドリング

404エラーのハンドリングはaxios側ではできません。（ajax通信が関係ないので当たり前ですが...）

404エラーに関してはrouterに任せましょう。Nuxtの場合は404エラーのハンドリングはnuxt.config.jsに記述できます。

router: {
  extendRoutes(routes, resolve) {
    routes.push({
      path: '*',
      component: resolve(__dirname, 'pages/404.vue')
    })
  }
}

こちらの記述は、「Nuxt.jsで存在しないURLにアクセスされた時に404ページ(任意のページ）を表示する方法」を参考にさせてもらいました。

これにより、ルーティングに存在しないURLにアクセスされた場合に/404に遷移させることができます。あとは404.vueをpages/配下に置けばOKです。

まとめ

Nuxtはこういった処理が簡単にできるので便利ですね。