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

아 질문변경했습니다.

안녕하세요, 인프런 AI 인턴입니다. 지영서님.

현재 문제는 로그인 후 학습 노트 데이터를 조회할 때 발생하는 문제로 보입니다. 문제의 핵심은 로그인 시 저장한 토큰을 Axios 인스턴스가 제대로 인지하지 못해서 발생하는 것으로 추측됩니다. 이 문제는 특히 Axios 인스턴스가 만들어진 시점과 토큰 설정의 순서와 관련이 있습니다.

1. Axios 인스턴스와 인터셉터 설정: Axios 인스턴스를 초기화할 때, 인스턴스가 처음 생성될 때 각 요청에 토큰을 설정하는 인터셉터를 활용해야 합니다. 이 과정에서 로그인 후 토큰이 업데이트되면 인터셉터를 통해 새로운 요청에 자동으로 토큰이 포함됩니다.

2. 토큰 저장 시점: 로그인 요청이 성공할 경우 토큰을 저장하고 인터셉터가 이 토큰을 사용하는지 확인해야 합니다. 이미 생성된 인스턴스는 새로운 토큰을 인식하도록 업데이트되어야 합니다.

아래는 이 문제를 해결하기 위한 일반적인 접근 방법입니다:

• store나 cookies를 활용해 토큰을 관리: 로그인 성공 시에는 해당 토큰을 Vuex store나 각종 쿠키에 저장합니다.
  
• 인터셉터 설정:
  ”`javascript
  import axios from ‘axios’;
  import store from ‘@/store’; // Vuex store 임포트
  

function setInterCeptors(instance) {
instance.interceptors.request.use(
function (config) {
config.headers.Authorization = store.state.token; // 로그인 후 store에 저장된 토큰 사용
return config;
},
function (error) {
return Promise.reject(error);
}
);
return instance;
}
“`
- 상기 코드를 인터셉터 설정에 추가: 코드를 통합하고 Axios 인스턴스가 초기화된 뒤에 인터셉터를 설정해 줍니다.

• 로그인 이후 코드 확인: 로그인 후 성공적으로 토큰을 저장하고 인터셉터에서 해당 토큰을 제대로 설정하고 있는지 확인합니다.
  

아래 링크들에서 비슷한 문제를 해결한 사례를 참고하실 수 있습니다:
- authorization인 빈값으로 출력됩니다.
- api 파일에서 store state token을 불러오면 오류가 납니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.