authorization인 빈값으로 출력됩니다.

질문입니다.

결론부터 말씀드리면 로그인 한 후에 network 텝에서 보면 request header의 authorization에 토큰 값이 안들어오고 빈 값으로 "" 확인이 됩니다.

콘솔로 찍어 봤을 때도 마찬가지로

interceptors.js 파일 안에 config가 먼저 출력이 되고

export function setInterceptors(instance) {
// Add a request interceptor
instance.interceptors.request.use(
function(config) {
// Do something before request is sent
console.log(config);
config.headers.Authorization = store.state.token;
return config;
},
function(error) {
// Do something with request error
return Promise.reject(error);
},
);

그 다음 LoginForm.vue에서 console.log(data.token)이 출력이 됩니다. 이를 통해 예상 되는 것은 request.headers의 authorization 안에 토큰 값이 담기기 전에 출력이 되는 것으로 보입니다. 코드의 문제점이 어디에서 잘못된 걸 까요???

store의 store.state.token은 원래 빈 값인데 setToken 함수를 LoginForm.vue에서 submitForm 버튼을 눌러서 setToken을 commit으로 호출해서 store.state.token에 토큰 값이 담겨져 있어서 이거를 interceptors에서 import로 부른 다음 store.state.token을 가져올 꺼라고 생각했는데 토큰 값이 state에 실리기 전에 interceptor가 실행된 것 같습니다... 맞을까요??

},
methods: {
async submitForm() {
try {
// 비즈니스 로직
const userData = {
 username: this.username,
 password: this.password,
 };
const { data } = await loginUser(userData);
console.log(data.token);
this.$store.commit('setToken', data.token);
this.$store.commit('setUsername', data.user.username);
this.$router.push('/main');
} catch (error) {
// 에러 핸들링할 코드
console.log(error.response.data);
this.logMessage = error.response.data;
} finally {
this.initForm();
}
},

console.log(data.token);

안녕하세요 my-way님, 어제만 이거 관련되서 유사한 질문이 2개 정도 들어왔었는데 아무래도 제가 해당 강의에 노트를 좀 적어놔야 할 것 같습니다 :) 일단 분석을 잘하신 것 같아요.

제가 강좌에서 인터셉터를 소개하고 구성한 이유는 로그인 이후의 API에 대해서 자동으로 토큰을 헤더에 실기 위해서입니다. 다만, 이 인터셉터를 안내하는 시점과 실제 로그인 이후의 API를 다루는 시점이 안맞아 뭔가 혼란스러우실 것 같아요. 후반부로 갈수록 해당 내용에 대해서 더 자세히 다루고 있습니다. 아래 질문 내용들도 한번 참고해보시구요. 혹시 들으시다가 이해 안되는 것 있으면 알려주세요 :)

https://www.inflearn.com/questions/26355

인프런 커뮤니티 질문&답변