Nuxt axios module 認証用トークン付与する共通処理を書いた時の引っかかりポイント

nuxtではaxiosはmoduleの形で導入します。各ページで呼んでもいいんですが、ページごとにインスタンス化していくと複数のaxiosが作られ増えていってしまいます。また、共通処理のようなものを書くことができません。
[ Axios module ] https://axios.nuxtjs.org/
この記事ではaxios moduleを拡張してaxios pluginを作った際に引っかかったポイントを残しておきます。

引っかかりポイント

下のようにリクエストの際にaxiosのデフォルトとしてヘッダーを付与する方法
https://github.com/axios/axios#global-axios-defaults

export default function({ $axios }) {
  $axios.onRequest((config) => {
    const token = "xxxx";
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
  })
}

$axiosが呼ばれた時にリクエストを生成してそれを引数としてonRequest()渡して、リクエストの生成後に実行される。
つまりリクエストの生成後にaxiosにデフォルト値としてheaderを追加しても、すでに生成されているconfigに入っているリクエストにヘッダーは追加されない。
NuxtのasyncDataで呼んでいるAPIの認証が１回目だけ認証エラーのような挙動になる。

修正

下のように生成されたリクエストにトークンを付与すればOK

  $axios.onRequest((config) => {
     const token = "xxxx";
     config.headers.Authorization = 'Bearer ' + token;
  });

あとがき

この記事の1番の引っかかりポイントは間違ったコードの方でも開発ビルドnpm run devの開発ビルドでは正常に動くというところです。この問題に気づくタイミングが本番ビルドをしたタイミング、さらにサーバーに乗せたタイミングだったため、本番用のtokenが違うせいか？SSRモードがうまく動いていないせいで、asyncDataの最初のデータだけ取れないのか？と違うポイントを調べて原因が見つからず四苦八苦してしまった。

ネット上には正しい記事も間違った記事もあり、今回は運悪く間違った記事を信じてしまった。このパターンに引っかかる人は少ないと思うが、いつか誰かの為になることを願って備忘録を残しておきます。今冷静に考えれば当たり前かと思うし悲しいし萎え。