[axios] 로그인 로직 interceptors

1. axios 통신을 이루기위한 기본 세팅

• api폴더 내에 index.js와 interceptors.js 파일 생성

https://axios-http.com/docs/interceptors

해당 axios 공식 홈페이지 내 인터셉터에 관한 자세한 내용이 적혀있다.

// api > index.js

import axios from 'axios';
import { setInterceptors } from '@/api/interceptors';

function createInstance() {
  // const protocol = window.location.protocol;
  // const hostName = window.location.hostname;

  const instance = axios.create({
    // baseURL: process.env.VUE_APP_API_URL || `${protocol}//${hostName}`,
    baseURL: process.env.VUE_APP_API_URL,
  });

  return setInterceptors(instance);
}

export const api = createInstance();

axios를 import 해주고, 반드시 return setInterceptors(instance);도 해주어야한다.

// src/api/interceptors.js

export const setInterceptors = instance => {
  // 요청 인터셉터 추가하기
  instance.interceptors.request.use(
    function (config) {
      const contentType = config.headers['Content-Type'];
      config.headers['Content-Type'] = contentType || 'multipart/form-data';
      return config;
    },
    function (error) {
      return Promise.reject(error);
    },
  );

  // 응답 인터셉터 추가하기
  instance.interceptors.response.use(
    function (response) {
      return response;
    },
    function (error) {
      return Promise.reject(error);
    },
  );
  return instance;
};

그리고 헤더가 똑같으면 interceptors에 함께 넣어도 되지만, api에 따라서 다른 헤더값을 가질 경우엔 위와같이 contentType 을 지정해서 다르게 사용할 수 있다.

• config 를 이용하여 contentType 작성
• Store에서 호출 시 header를 보내주려면 {header: content-Type} 과 같은 형태로 api 호출 시에 함께 보내주면 된다.

2. 토큰

//authStore.js

const DATA = () => {
  return {
    auth: JSON.parse(sessionStorage.getItem('m_auth')) || '',
    sessionId: JSON.parse(sessionStorage.getItem('m_sessionId')) || '',
  };
};

export const authStore = {
  namespaced: true,
  state: DATA(),
  getters: {
  // 데이터 초기화
    IS_LOGIN(state) {
      return state.auth !== '';
    },
  },
  mutations: {
    SET_LOGIN_INFO(state, { auth = '', sessionId = '', result }) {
      switch (result) {
        case true:
          state.auth = auth;
          state.sessionId = sessionId;
          sessionStorage.setItem('m_auth', JSON.stringify(auth));
          sessionStorage.setItem('m_sessionId', JSON.stringify(sessionId));
          break;
        case false:
        default:
          state.auth = DATA().auth;
          state.sessionId = DATA().sessionId;
          sessionStorage.clear();
          break;
      }
    },
  },
   actions: {
    async LOGIN_ACTION({ commit }, user) {
      try {
        const { data } = await api.post('/admin/user/login', {
          UserID: user.id,
          Password: user.pw,
        });
        switch (true) {
          case data.status === '0000':
            await commit('SET_LOGIN_INFO', {
              auth: data?.output[0],
              sessionId: data?.accessToken,
              result: true,
            });
            await router.push('/main');
            break;
          default:
            throw new Error('Login 실패');
        }
      } catch (e) {
        alert('로그인에 실패하였습니다.');
        commit('SET_LOGIN_INFO', {
          result: false,
        });
        console.error(e);
      }
    },
  },
};

사용자와 id를 저장하고, 이를 세션스토리지에 저장한다.(sessionStorage.setItem('m_auth', JSON.stringify(auth));)이게 저장한다는 의미!!

sessionStorage는 기본적으로 key, value 형태의 문자열 값을 저장할 수 있도록 한다.
따라서 객체의 형태를 저장할 경우 String 형태로 "[Object, Object]" 가 저장되기 때문에 getItem 하여 사용할 수 없게된다.

😍 따라서,객채형태를 value 로 저장하기 위해서는 String 으로 변환을 하거나, 별도의 prototype 을 정의해줘야한다.

아래는 객체형태를 String 으로 변환하여 사용하는 방법이다.

// keyName 이라는 이름의 key 에 objectData 이름의 객체 데이터를 세션에 저장
sessionStorage.setItem(keyName, JSON.stringify(objectData));

// keyName 이름의 String 을 가져와 JSON 형태로 다시 Parse 진행
JSON.parse(sessionStorage.getItem(keyName));

즉, JSON.stringify(value)는 통신하고자 하는 자료를 문자데이터 변환하고자 할 때 사용되고 JSON.parse(value)는 사용하고자 하는 자료를 parse(분석하다)하여 javaScript 내에서 활용할 수 있도록 하는 메소드이다.

뮤테이션 내에 state.auth= auth; 와 같이 저장하고, 이를 또 세션에 담는 것이다.

그리고 getters의 IS_LOGIN은 초기화하는 것을 의미한다.