[트러블 슈팅] vue.js axios 인터셉터 설정

이때 까지는 항상 컴포넌트 마다 axios를 임포트 해와서 CRUD를 구현 해 왔다.

하지만 그때마다 요청의 헤더에 토큰을 주입해서 전달하기 여간 귀찮은 일이 아닙니다.

그래서 찾아보던중 axios의 인터셉터 설정을 하면 요청마다 일일이 토큰을 주입하지 않아도 된다는 것을 알게되었습니다.

 

 

해결

import { createApp } from 'vue'
import router from './index.js'
import App from './App.vue'
import mitt from 'mitt';
import axios from 'axios';

axios.interceptors.request.use((config)=>{
    const token = localStorage.getItem('token');
    if(token){
        config.headers.Authorization=`Bearer ${token}`
    }
    return config;
});

const emitter = mitt();
const app=createApp(App);
app.config.globalProperties.emitter=emitter;
app.config.globalProperties.$axios=axios;
app.use(router);
app.mount('#app');

 

main.js 파일에 axios를 설정해 주었습니다.