vue.js×axiosで常にリクエストヘッダーに値を仕込む共通処理を書く

端的に答えを書くとaxiosの機能の1つであるinterceptorsというものを使います。

最近のtoCアプリはwebのみならず、iOSやAndroid等モバイル対応する必要性がビジネス上多々あると思います。
この様に様々なプラットフォーム対応する為に、登録やログインの際は従来型のセッション認証ではなくJWT認証等のToken認証を使うことが多いと思います。
このToken認証を用いる際サーバサイドでToken検証を必要するタイミングがありその為request headerにToken情報を添付しリクエストを送るといったことが多々発生します。

APIを叩く際にJSフレームワークで特に使われているライブラリががaxiosです。
基本的にaxiosでリクエストを送る際には以下の様にしてheaderに任意の値を含めることができます。

axios
    .get('http://localhost:3000/samples/', {
     headers: { 
       "access-token": ******,
     }, 
})

ただこれを逐一書いているのは面倒です。更にコードの可読性も低下します。そんなめんどくささを解消する機能が前段で述べたinterceptorsです。

とりあえずvue cli等でプロジェクトは作成されていると仮定して、axiosをyarn addします。

yarn add axios

ルート配下にsrc/pluginsというディレクトリを作成しそ更にの配下にaxios.jsファイルを作ります。
このファイルに以下のコードを追加。

//　plugins/src/axios.js　
import axios from 'axios'

const axios_instance = axios.create();
axios_instance.interceptors.request.use(config => {
   config.headers = {
       'Authorization' :'Bearer ' +　localStorage.getItem('idToken') 
   }
   return config
})

export default axios_instance;

やっていることはyarn addしたaxiosを読み込み、axiosインスタンスを作成。
作成したインスタンスのinterceptorsプロパティに、リクエストヘッダーに対して常にベアラトークンを仕込むという処理を書き、
これを外部ファイルで使える様エクスポートしています。
今回は便宜上localStorage上にtokenを入れていますが、localStorageにtoken情報を保存することに関しては若干議論の余地があるのでそこは考慮して実装いただけると幸いです。

とりあえずこれでinterceptorsを使える準備はできたので、こいつを実際にvueのコンポーネントで読み込んでみます。

//components/layouts/sign_in.vue

//html部分省略
<script>
import axios from '../src/plugins/axios.js'
export default {
//..省略
    await axios.get('http://localhost:3000/users/')
           .then((response) => {
           console.log(response.data.user_data);
     }) 
 }
</script>

今回はRailsのAPIサーバーに向けてrequestを送っているので、
Rails側でrequest headerに仕込んだ値が適切に送られているか確認します。

#application_controller.rb

 def token_from_request_headers
     binding.pry
     request.headers['Authorization']
 end
 
 #pry(#<ApplicationController>)>"*******************"

以上の様な形でheader情報に値が含まれていることを確認しました。

今回はコンポーネント内で読み込みましたが、main.js等で読み込んでグローバルにセットして使い回すなどもできます。

interceptorsはめちゃくちゃ便利なので、一定の規模感を持ったアプリで且つaxiosを利用する場合はチョイスしない手はないです。
皆さんの実装の手助けになれば幸いです。