Nuxt3とAxiosで認証付きAPIリクエストを実現する方法☝️composablesを使いこなしましょう😎

// composables/useFoo.ts
export const useFoo = () => {
  return useState('foo', () => 'bar')
}

// composables/use-foo.ts or composables/useFoo.ts
export default function () {
  return useState('foo', () => 'bar')
}

<script setup lang="ts">
const foo = useFoo()
</script>

<template>
  <div>
    {{ foo }}
  </div>
</template>

$ yarn add swagger-typescript-api -D
$ npx swagger-typescript-api \
  -p ./swagger.yaml \
  -o ./types \
  -n API.ts \
  --axios \
  --sort-types \
  --sort-routes \
  --extract-request-params \
  --extract-request-body \
  --extract-response-body \
  --extract-response-error \
  --extract-enums \
  --type-prefix "API"

// composables/useRepository.ts

import { Api as API } from 'types/API'
import _ from 'lodash'
import type { AxiosRequestHeaders, CreateAxiosDefaults } from 'axios'

export default async (opt?: { axiosConfig?: CreateAxiosDefaults }) => {
  const runtimeConfig = useRuntimeConfig()
  const authenticationService = useAuthenticateService()

  const optContentType: string | undefined = _.get(
    opt,
    "axiosConfig.headers.['Content-Type']",
  )

  const axios = new API(
    _.assign(
      {
        baseURL: runtimeConfig.public.REST_API_DOMEIN,
        timeout: _.toNumber(runtimeConfig.public.REST_API_TIMEOUT),
        maxRedirects: _.toNumber(runtimeConfig.public.REST_API_MAX_RETRIES),
        headers: {
          'Content-Type': optContentType ? optContentType : 'application/json',
        },
      },
      (opt?.axiosConfig || {}) as Record<string, unknown>,
    ),
  )

  axios.instance.interceptors.request.use(
    async (config) => {
      try {
        // getCurrentUser() 実行時にリフレッシュトークンを用いた認証トークンの更新が適宜行われる
        const currentSession = await authenticationService.getCurrentUser()
        return {
          ...config,
          headers: {
            ...(config.headers || {}),
            Authorization: `Bearer ${currentSession}`,
          } as AxiosRequestHeaders,
        }
      } catch (e) {
        await authenticationService.signOut()
        window.location.href = '/login'
      }
      return config
    },
    (error) => {
      return Promise.reject(error)
    },
  )

  return axios
}

// pages/foo.vue

<script setup lang="ts">
const repo = await useRepository()
</script>

<template>
  <div>
    {{ foo }}
  </div>
</template>