nuxtjs/axiosでinterceptorを使う[Nuxt.js Vue.js]

最近 Vue.js ばっかり触っている。
その流れで Nuxt.js を使って Web サイトを作っているが，
@nuxtjs/axios の interceptor を使おうとしてハマったのでメモを残しておく。

目次

そもそもどういった時に使いたいかというと，

ログインが必要なサイトを作るときに token 情報をリクエストヘッダーに含める時とかに使うと便利！

例

  • リクエスト発行直前に，token があれば header に詰める！みたいな処理を差し込む
  • レスポンスに新しい token が入っていたら，token を更新する

上記例をリクエストごとに書くのはナンセンスなので，axios の interceptor に書いておいて，毎回リクエスト前後で必要な処理を自動でやらせておくと良い

axios の interceptor

生の axios (npm install axios)を使う場合は，下記の Qiita の記事がわかりやすい。
axios を乗りこなす機能についての知見集

@nuxtjs/axios の interceptor

結論から言うと，
Nuxt.js の axios(npm install @nuxtjs/axios)を使う場合，5.0.0 以上を使うなら下記公式ページの通り plugin/axios.js を作って，その中に書く。
Extending Axios

古いバージョンだとnuxt.config.jsの中にaxiosと書いて設定ができるから，
requestInterceptorとかresponseInterceptorとか書くことで，interceptor の設定もここで書けるよ！と書いてある。

が，これは古い情報！！これに惑わされた！

5.0.0-alpha.0 (2018-01-28)でrequestInterceptorはonRequest,responseInterceptorはonResponseに変更になっており，これは下記みたいにインスタンスに対して定義するようになっていた。

1
2
3
4
5
$axios.onRequest(config => {
    :
    :
    return config
  })

詳細はここ読んで。

あと，もちろん古いバージョンから変わらずnuxt.config.jsの中に baseURL とかを option として書くことはできる。
option の種類とかはここ見て。

おわりに

まあ Qiita ばっか読んでないで公式読めってことですね。
vue.js 界隈は日本語化が進んでるし，面倒がらずにちゃんと公式ドキュメントを読みましょう！