はじめに
この投稿は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ヘッダが付与されていることがわかります。
想定通りの挙動になりました!成功です!