토큰값을 axios 인터셉트에서 불러올때 store.state.token 으로 하는게 맞나요?

Question

스토어에 저장된 토큰값을 axios 인터셉트에서 불러올때
store.state.token 으로 하는게 맞나요? 안되네요?
참고로 개발자 툴(vuex)에서 확인해보면 token값은 존재합니다.

소스는 아래와 같습니다.

import axios from 'axios';
import store from '@/store/index';
// axios 인스턴스를 생성합니다.
const instance = axios.create({
baseURL: process.env.VUE_APP_API_URL,
// timeout: 1000,
});

instance.interceptors.request.use(
function(config) {
// 요청 성공 직전 호출됩니다.
// axios 설정값을 넣습니다. (사용자 정의 설정도 추가 가능)
console.log('token', store.state.token);
// const token = this.$store.state.token;
config.headers.Authorization = store.state.token;
return config;
},
function(error) {
// 요청 에러 직전 호출됩니다.
return Promise.reject(error);
},
);

캡틴판교 · Answer

안녕하세요 개발자님, 좋은 질문이네요! 혹시 강의 뒷 부분도 보셨을까요? 인터셉터에서 토큰을 셋업해주려면 일단 처음에 사이트에서 로그인을 한 토큰을 스토어에 저장하고 인터셉터에서 접근할 수 있어야 합니다. 해당 내용은 뒷 부분까지 차근히 보시면 따라오실 수 있을거에요 :)