axiosのヘッダーにJSON Web Tokenを埋める

JSON Web Token を毎回ヘッダに埋めるのが嫌だったのでつくってみました。

http.js

import axios from 'axios'

const http = axios.create({
  baseURL: `${process.env.API_URL}/api/v1/`
})
http.interceptors.request.use((config) => {
  if (token) {  
    config.headers.Authorization = `Bearer ${token}`
    return config
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

http.post('/hogehoge')

http.interceptors.request.use で、リクエストを投げる前にインターセプトしてリクエストヘッダにアクセスできるので、それを利用します。
Token を Cookie やローカルストレージなど、環境に合わせて取得し、それを　Authorization : Bearer token の形になるように埋めています。
あとはそのインスタンスを使い回すだけ、最高。