【Nuxt.js】axios로 header에 Authorization를 항상 붙이고 싶다!

투고자의 고민

고민 해결

①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....につけるよ

②nuxt.config.js에서 plugins/axios.js를 인식시킨다

// ~~ 省略 ~~

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

// ~~ 省略 ~~