Authorization

Question

토큰을 이용한 API 인증 처리

<-이쪽 강좌를 몇번이나 처음부터 따라해보는데, Authorization 에 token값이 저장되지 않습니다.

아래와 같이 인터셉터하는 부분에 log를 찍어봐도 token값이 비어 있습니다. 어디가 문제일까요? 어떤 강의부분을 다시 봐야할까요?

강좌내용과 제 화면의 차이로 보이는 부분은 로그인을 하면 저는 크롬개발자도구 네크워크 부분에 login이 1번만 찍히는데, 강사님 화면에는 2번찍히는 것으로 보이네요. 이부분이 차이가 있을까요?

instance.interceptors.request.use(
    function(config) {
      // Do something before request is sent
      console.log('api' + store.state.token); <--★
      config.headers.Authorization = store.state.token;
      return config;
    },
    function(error) {
      // Do something with request error
      return Promise.reject(error);
    },
 );

Answer

안녕하세요 Wonse님 답변이 늦어져서 죄송합니다 :)

좋은 질문 주셨네요. 많이들 헷갈려 하시는 부분인데 아무래도 제가 교수 설계를 잘못한 것 같아요.. ㅎㅎ

그 지금 코드를 보시면 store.state.token 값을 인터셉터에서 헤더에 끼워주고 있습니다. 매 API 요청이 날 때 마다 스토어에 저장된 토큰 값을 들고 오는거죠. 그 즉슨 API 요청이 일어날 때 스토어에 토큰 값이 있어야 한다는 의미입니다. 확인하셔야 될 구간은 아래 3가지 입니다.

1. 로그인 하고 스토어에 토큰을 잘 저장하는지

2. 로그인하고 난 토큰이 브라우저 저장소에 잘 저장되는지

3. 사이트에 접속했을 때 브라우저 저장소에 있는 토큰 값을 잘 불러와서 스토어에 담아주는지

더 살펴보시고 궁금하신거 있으면 알려주세요.

강의 수강해 주셔서 감사합니다 :)

Wonse Lee

Authorization <- token 넣기가 안됩니다.

Wonse Lee

Authorization <- token 넣기가 안됩니다.

이 글과 비슷한 Q&A

vuex 실행시 새로고침해야지만 리스트에 나타나는 현상

export default 관련한 질문

깃허브 vue-todo 접근불가에 따른 확인요청

깃허브에 문제있는것 같습니다.