Nuxt.ts - axiosのheadersに常にtokenを付与する方法 #JavaScript

JWTのトークンをリクエストの度に付与するのが面倒で、この実装で実現できたのでメモ

plugins/axios.ts

import { Context } from '@nuxt/types';
import Cookies from 'js-cookie';

export default function ({ $axios }: Context) {
  $axios.onRequest((config) => {
    const token = Cookies.get('authToken');
    if (token) {
      config.headers.common['Authorization'] = 'Bearer ' + token;
    }
    return config;
  });
}

nuxt.config.js

export default {
  // ...
  plugins: ['@/plugins/axios'],
  // ...
}