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

투고자의 고민

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

htps : // 기주 b. 코 m / 아오 s / 아 오 s
독자의 목소리: 어이! 공식적으로 그대로 쓰여져 있다! 이 정도로 기사에 아무쪼록!
투고자:히아

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

nuxt.config.js

// ~~ 省略 ~~

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

// ~~ 省略 ~~

너무 간단, 이것만! ! ! 진정하고 공식을 읽자.