axiosでinterceptorsを使って毎リクエスト直前にヘッダーをセットする

Firebase AuthのidToken(JWT)を、サーバー側（NestJS）へのリクエストで使う場面で、サーバーへのリクエスト時にAuthorizationヘッダーにaccess_tokenを付与する必要があった。

FirebaseのユーザーはNuxt3のuseStateで入れてuseFirebaseUserで使っているけど今回は省略。

最初はAPIリクエスト用のaxiosインスタンスを作って、baseURLと一緒にAuthorizationヘッダーもセットしていて、最初は動きはする。

before 期限切れになる

const makeIntance = async () => {
    const instance = axios.create({
      baseURL
    });
    const user = useFirebaseUser()
    if (user.value) {
      const token = await user.value.getIdToken()
      instance.defaults.headers.common['Authorization'] = `bearer ${token}`
    }
    return instance
  }

でも、トークンの有効期限は1時間程度なので、ページを1時間以上開きっぱなしの状態でリクエストすると401エラーになってしまう。 postとかgetとかリクエストの直前にセットすることできないかなぁと探したら、まさにそれ用のInterceptorsという機能があった。リクエスト、レスポンス、どちらにも介入することができる。

axiosのinterceptorsで、リクエストの前処理を共通して行う - Qiita

axios-http.com

今回はリクエストの前にgetIdToken()を実行してセットするようにした。 getIdToken()はPromiseを返すので動くかな？と思ったけど問題なかった。

after

const makeIntance = async () => {
    const instance = axios.create({
      baseURL
    });
    const user = useFirebaseUser()
    if (user.value) {
      instance.interceptors.request.use(async (request) => {
        const token = await user.value.getIdToken()
        request.headers.common['Authorization'] = `bearer ${token}`
        return request
      })
    }
    return instance
  }