【Nuxt.js】axiosでheaderにAuthorizationを常につけたい！

3113 ワード
JWT Vue.js JavaScript nuxt.js axios JavaScript テキストリンク

投稿者のお悩み

・JWT認証のアプリでaxiosでAPI叩くときにheadersにAuthorization:tokenをくっつける共通処理を作りたい
（色んな記事みたけどうまくいかないよ・・・）

お悩み解決

nuxtのpluginsを使ってaxiosをラップする処理を用意する

①plugins配下にaxios.jsを作成して、共通処理を書く

plugins/axios.js
import axios from 'axios'

export default function({ $axios }) {
  $axios.onRequest((config) => {
    axios.defaults.headers.common['Authorization'] = localStorage.getItem(
      'auth._token.local'
    )
    return config
  })
}
// axiosにデフォルトでヘッダーにAuthorizationを用意し、中身はlogalStorageのtokenを貼り付けるよ
// onRequest リクエスト飛ばす前に処理いれるよ
// common はすべてのリクエストGET,POST....につけるよ


https://github.com/axios/axios
読者の声：おい！公式にその通り書いてあるぞ！この程度で記事にすんなや！
投稿者：ひぃ

②nuxt.config.jsでplugins/axios.jsを認識させる

nuxt.config.js
// ~~ 省略 ~~

plugins: ['@/plugins/axios']
// pluginsフォルダ配下のaxiosを認識するよ

// ~~ 省略 ~~

いたってシンプル、これだけ！！！落ち着いて公式を読もうね。