[Axios] 헤더에 인증 정보 추가하는 방법

헤더에 인증 정보 추가하는 방법

들어가며

• Axios를 사용하여 헤더에 인증(Authorization) 정보를 추가하는 방법을 정리해본다.
• 이 글은 리액트(React) 코드로 작성되었다.

 

방법

① 파일에 인증 헤더 부분 추가하기

• API 호출을 하고자 하는 파일 안에 인증 정보를 담은 변수를 생성하여 추가하는 방법이다.

// 인증 정보를 담은 변수
const authHeader = (thunkAPI) => {
  return {
    headers: {
      authorization: `Bearer ${thunkAPI.getState().user.user.token}`,
    },
  };
};

export const createJobThunk = async (job, thunkAPI) => {
  try {
    const resp = await customFetch.post('/jobs', job, authHeader(thunkAPI));   // 인증 정보 추가
    thunkAPI.dispatch(clearValues());
    return resp.data;
  } catch (error) {
    return thunkAPI.rejectWithValue(error.response.data.msg);
  }
};

 

② utils 폴더에 인증 정보가 담긴 파일 생성 후, 필요한 곳에서 import 하여 추가하기

• @utils@ 폴더 안에 @authHeader.js@ 파일을 생성한 후, API 호출을 하는 파일에서 import 하여 인증 정보를 헤더에 추가하는 방법이다.

/src/utils/authHeader.js

// 헤더에 넣을 인증 정보
const authHeader = (thunkAPI) => {
  return {
    headers: {
      authorization: `Bearer ${thunkAPI.getState().user.user.token}`,
    },
  };
};

export default authHeader;

 

/src/features/jobThunk.jsx

import authHeader from '../../utils/authHeader';   // 인증 정보 가져오기

export const createJobThunk = async (job, thunkAPI) => {
  try {
    const resp = await customFetch.post('/jobs', job, authHeader(thunkAPI));   // 인증 정보 추가
    thunkAPI.dispatch(clearValues());
    return resp.data;
  } catch (error) {
    return thunkAPI.rejectWithValue(error.response.data.msg);
  }
};

 

③ Axios 인터셉터(Interceptor) 사용하기

• Axios를 사용하여 API 요청 시, 공통적으로 사용하는 Axios 인스턴스를 정의한 파일(@utils/axios.js@) 안에 @request@ 인터셉터(Interceptor)를 이용하여 헤더에 인증 정보를 추가하는 방법이다.

 

/src/utils/axios.js

import axios from 'axios';
import { getUserFromLocalStorage } from './localStorage';

const customFetch = axios.create({
  baseURL: 'https://example.api',
});

// Axios 요청이 실행되기 전에 실행되는 작업 추가
// -> request 인터셉터는 요청이 서버로 전송되기 전에 호출된다.
customFetch.interceptors.request.use(
  (config) => {
    // 로컬 스토리지에서 사용자 정보 가져오기
    const user = getUserFromLocalStorage();

    // 사용자 정보가 있을 경우
    if (user) {
      // 인증 정보 추가하기
      config.headers['Authorization'] = `Bearer ${user.token}`;
      // 최신 버전에서 'common'을 추가할 경우, undefined가 반환된다.
      // config.headers.common['Authorization'] = `Bearer ${user.token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default customFetch;

 

/src/utils/localStorage.js

// 로컬 스토리지에서 사용자 정보 가져오기
export const getUserFromLocalStorage = () => {
  const result = localStorage.getItem('user');
  const user = result ? JSON.parse(result) : null;

  return user;
};

 

/src/features/jobThunk.jsx

• 이제 헤더에 인증 정보를 따로 추가해주지 않아도 된다.

export const createJobThunk = async (job, thunkAPI) => {
  try {
    const resp = await customFetch.post('/jobs', job);   // 인증 정보를 따로 추가하지 않아도 된다.
    thunkAPI.dispatch(clearValues());
    return resp.data;
  } catch (error) {
    return thunkAPI.rejectWithValue(error.response.data.msg);
  }
};