inflearn logo
강의

講義

知識共有

Vue.js 完全マスター - 実務に必要なすべて

インターセプタを使用したHTTPヘッダの設定

강사님 코드로 진행할 경우 console.log( config); 도 안찍혔어요. instance 를 생성해서 공통으로 사용하셨는데 loginUser 에만 커스텀한 instance를 넣으니 콘솔에 컨피그 객체가 찍혀요

92

작성자 없음

投稿した質問数 0

0

강사님 코드로 진행할 경우 console.log( config); 도 안찍혔어요. instance 를 생성해서 공통으로 사용하셨는데 loginUser 에만 커스텀한 instance를 넣으니 콘솔에 컨피그 객체가 찍혀요


function loginUser(userData) {
  const instance = createInstance();
  return instance.post('login', userData);
}

export { loginUser };
      console.log('Request Interceptor:', config);  

<- 해당 부분이 안찍히다 로그인 함수에만 커스텀 인스턴스를 사용하니 찍히네요
영상이 대체로 ㅇ조금 그대로하면 안되는 경우들이 있는 것같습니다. 부분적인 업데이트는 필요한 것 같습니다

 

import store from '@/store/index'; // Vuex 스토어 가져오기

export function setInterCeptors(instance) {
  // Add a request interceptor 요청 인터셉터
  instance.interceptors.request.use(
    function(config) {
      // 요청 전 실행되는 부분
      // console.log('Request Interceptor:', config);
      config.headers.Authorization = store.state.token; // 토큰을 헤더에 추가

      console.log('Request Interceptor:', config);
      return config;
    },
    function(error) {
      return Promise.reject(error);
    },
  );

  // Add a response interceptor
  instance.interceptors.response.use(
    function(response) {
      // 응답 후 처리
      return response;
    },
    function(error) {
      return Promise.reject(error);
    },
  );
  return instance;
}

javascript vue.js vuex

回答 1

0

communityai8509

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

강의에서 제공된 코드를 사용하면서 콘솔에 config 객체가 출력되지 않는 문제를 겪고 계시는군요. 추가로 loginUser 함수에만 커스텀 인스턴스를 사용했을 때만 config 객체가 출력되었다고 하셨습니다. 이는 인스턴스를 생성하고 사용하는 방식에 따라 발생할 수 있는 문제입니다.

문제 설명

axios.create()를 통해 커스텀 인스턴스를 만들어야 인터셉터가 제대로 동작하는 것을 확인하신 것 같습니다. 이는 setInterceptors 함수가 특정 인스턴스에 인터셉터를 적용하는 방식이기 때문인데요, 인터셉터가 적용된 인스턴스가 아닌 기본 인스턴스를 사용하면, 인터셉터가 설정되지 않아 해당 로그가 출력되지 않죠.

해결 방법

  • 인스턴스 생성 및 셋업: createInstance 함수 내에서 setInterceptors(instance)를 호출해 인터셉터를 설정한 다음 해당 인스턴스를 반환합니다.
  • 일관된 인스턴스 사용: loginUser 외에 다른 API 요청에도 동일한 인스턴스를 사용하여 일관되게 인터셉터가 설정되도록 해야 합니다.

질문 관련 참고

아래 글은 인스턴스 및 인터셉터 설정 관련하여 참고할 수 있는 게시물입니다. 유사한 문제를 다루고 있어 더욱 도움이 되실 수 있습니다:

  1. Authorization인 빈값으로 출력됩니다.
  2. Authorization <- token 넣기가 안됩니다.

질문 내용에 포괄적이지 않은 강의 부분이 있다면, 지식공유자님께서 강의를 업데이트 중일 수도 있으니 이러한 의견을 지원팀에 제출하는 것도 좋은 방법입니다.

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

node 10버전 사용

0

64

1

강의에 대해 질문 드립니다.

0

61

1

vue CLI 대신 vite를 사용해도

1

140

2

질문삭제

0

149

2

로그인 에러발생만하면 네트워크 커넥션 에러 발생 해결

0

117

1

rndrmagkqslek.

0

73

1

계속 따라하다가 안돼서 bash에 연결할떄 안되더라구요

0

104

1

axios 에러가 뜹니다.

1

237

2

vue3로 진행하시면서 router에서 '*' 적용이 안되시는 분들

2

312

1

vue 관련 다른 강의 출시예정이없으신지 궁금합니다!

1

154

1

AppHeader.vue에 vue 디폴트 만들에 Delete `␍` 오류나면

1

195

1

vue3로 따라오시다가 import axios 에러 뜨시는 분들

2

445

2

$router 를 이용한 메인 페이지로 이동

1

290

1

혹시 node.js 10.24 버전으로 해도 상관없나요?

2

461

2

에러 경로가 LoginForm.vue 43번째줄 말고 다른 경로로 출력됩니다.

1

299

2

pinia 사용할려고 하는데 에러가 나옵니다.

1

486

2

swagger ui의 post/posts에 글 기록하려고 하면 unauthorized 에러가 납니다..

1

1104

2

safari 개발자 도구에 대한 질문입니다

1

568

2

스웨거에 글 등록시 401 에러가 나와요 ㅠ

1

722

2

이 에러 때문에 진행이 안되네요 ㅠ

1

675

1

windows .nvmrc nvm use 실행 오류

1

1547

2

강사님 최신화가 필요해보입니다.

2

960

2

npm i 에러

1

613

1

eslint 에러가 발생합니다

1

625

1