Next.jsでトークン設定済みのAxiosを使えるようにしてみた

経緯

• Axiosに認証トークンを設定する処理を共通化したい
• 何ならAxiosを使用する際にトークン設定済みの状態にしたい

方法

• Axiosのインスタンスを生成→ヘッダーの設定→そのインスタンスの返却、を行うラッパー?ソースファイルを用意する。

• 各ソースファイルでAxiosを使用したいときは、そのラッパーファイルから呼ぶようにする。

実装

• ラッパーファイル（例：customAxios.ts）

import axios from 'axios'; // Axios本体をインポート

const instance = axios.create(); // Axiosインスタンスを生成

instance.interceptors.request.use(
  (config) => {
    // 認証トークンをヘッダーに付与
    config.headers.common['Authorization'] = 'Bearer ' + process.env.TOKEN; // この例ではBearerトークンを設定
    return config;
  }
);

export default instance; // デフォルトエクスポート!!

• 使用例

import axios from '@/.../customAxios'

// ヘッダーがセットされた状態で送信される！！
axios.get('<path>')
.then(res => {...});

備考

以下のような引数も取れるのでエラー時の処理も共通化できそう。（試してはいない）

import axios from 'axios';

const instance = axios.create();

instance.interceptors.request.use(
  (config) => {
    config.headers.common['Authorization'] = 'Bearer ' + process.env.TOKEN;
    return config;
  },
  (error) => {
    // エラー時の処理
    return Promise.reject(error);
  }
);

export default instance;

後書き

NuxtだとAxiosが最初からモジュール化されているから良い感じにやる方法あるみたいだけど、
Nextだとこれくらいしかスマートな方法がないような。

Nextに限らず色々応用はできそう。

他に良い案があればご意見いただければと。