• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

(재질문/Vuex 적용 - 인증 1) 강의에서 8분 18초 부분 질문 있습니다.

21.07.30 11:26 작성 조회수 148

0

강의에서 "뷰 어플리케이션이 구동되었을 때 브라우저 저장소를 확인한다. localstorage에 token이 있는지 없는지 체크한다."
라고 말씀해주셨습니다. 그래서 하단의 코드를 보시면,
const store = new Vuex.Store({ ... });

const { token } = localStorage;
store.commit("LOGIN", token);

export default store;
store라는 Vuex의 저장소 컨테이너를 선언해주었고, 밑에 localStorage에서 token을 불러왔습니다.
그리고 store의 commit 메소드를 이용하여 LOGIN mutations에 token을 전달하였죠.
제가 궁금한 건
1. 상태의 저장소를 담당하는 Vuex store에서 위와 같은 로직을 넣은 이유입니다. 쓸데 없는 질문일 수도 있지만 export default store; 전 저기에 선언을 해주면 Vuex의 store를 이용(e.g., state.isAddBoard, commit, ...)하는 모든 컴포넌트는 항상 localStorage에서 token을 받아 LOGIN mutations에게 전달하는 건가(?)라는 궁금증이 떠올랐습니다.
여기 챕터와는 무관하지만 아래 코드에 대해 질문이 있습니다.
export const setAuthInHeader = token => {
  axios.defaults.headers.common["Authorization"] = token
    ? `Bearer ${token}`
    : null;
};

const { token } = localStorage;
if (token) setAuthInHeader(token);

답변을 찾아보는 도중 강사님께서 브라우져를 새로고침하면 메모리에 있는 토큰 정보가 초기화 되기 때문에 위의 코드를 넣어주셨다 하였습니다. 그렇다면 setAuthInHeader라는 함수안의 axios.defaults.headers.common이라는 함수(?)를 설정하고 아래의 코드 처럼 setAuthInHeader(token)을 선언해주면, 밑에 있는
auth의 login request api, board의 fetch, create request api를 사용할 때 자동으로 axios 헤더에 토큰을 장착하여 보내지게 되는 것인가요?
course-thumbnail

트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술

답변 1

답변을 작성해보세요.

0

김정환님의 프로필

김정환

지식공유자

2021.08.22

1번 질문.

네 그렇습니다. 하지만 조금 다른건 컴포넌트에서 사용할 때마다 실행되는 것은 아니고요. 생성된 스토어 객체를 익스포트하기 때문에 어플리케이션이 동작할 때 딱 한번만 실행됩니다.

2번 질문. 

axios 라이브러리 사용법인데요. axios.defaults.headers.common 에 설정하면 이후의 모든 axios 요청 api에는 해당 헤더가 붙게됩니다. 

이 글과 비슷한 Q&A