axios Interceptorsを使用して共通処理を作る。

はじめに

この投稿はNuxt.js + Auth0 + Spring Boot で作る認証付きSPAのおまけです。
リポジトリは以下
フロント
サーバサイド

概要

axiosを使用して非同期通信を行う際
リクエスト時やエラー時などで共通処理を挟み込みたいことがあると思います。
今回は

• リクエスト時にAuthorizationヘッダーを付与すること
• エラー発生時にエラーの内容をトーストで表示すること

この二点をaxios Interceptorsを使用して実現したいと思います。

エラー表示に使用するToastを設定する

先ずはトーストの準備をしましょう。 yarnでdependenciesに追加します。

yarn add @nuxtjs/toast

nuxt.config.js　に設定を追加します。

nuxt.config.js

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

axios Interceptorsの設定

puluginsに追記します。

nuxt.config.js

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

plugins/axios.jsを作成します。

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)　//　エラー時はエラー内容をそのままトースト表示
  })
}

動作確認

トーストの確認

認証前に認証が必要なリクエストを送信すると401エラーが返ってきています。
その内容がトーストで表示されていますね。

Authorizationヘッダの確認

認証後に認証が必要なエンドポイント(/api/v1/private)にリクエストを送信しています。
200が返ってきていてAuthorizationヘッダが付与されていることがわかります。

想定通りの挙動になりました！成功です！

参考