axios Interceptors를 사용하여 공통 처리를 만듭니다.

오류 표시에 사용할 Toast 설정

먼저 토스트를 준비합시다. yarn에서 dependencies에 추가합니다.

yarn add @nuxtjs/toast

nuxt.config.js에 설정을 추가합니다.

 modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    '@nuxtjs/toast'   //追加
  ],
  toast: {
    position: 'top-center',  //トーストの表示位置
    duration: 2000           //トーストの表示されている時間（今回は2秒に設定）
  }

axios Interceptors 설정

plugins에 추가합니다.

   plugins: [
    '~/plugins/auth0.js',
    '~/plugins/axios.js'  //追加
  ],

plugins/axios.js를 만듭니다.

import Vue from 'vue'

export default function ({$axios}) {
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
    config.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('idToken'); // リクエスト時にAuthorization　ヘッダを設定、設定値はlocalStorageのidTokenの値を使用する。
  })

  $axios.onError(error => {
    Vue.toasted.error(error)　//　エラー時はエラー内容をそのままトースト表示
  })
}

동작 확인

토스트 확인

Authorization 헤더 확인

참고