axios 인스턴스로 토큰 관리하기

소셜로그인을 통해 토큰을 관리해야되는데, 어지러운 경우가 많다.

 

access_token을 보냈는데 만료된 경우라면?

=> refresh_token을 통해 access_token을 갱신해야한다.

 

이를 위해 axios에서는 인스턴스 커스텀 방법을 제시한다.

https://yamoo9.github.io/axios/guide/api.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%83%9D%EC%84%B1

API | Axios 러닝 가이드

getAuthAxios.ts

401(권한없음, 토큰 만료)이 아니면 Axios에러

status가 401이 아닌 경우, Error를 reject하는 Promise를 반환한다. 

 

401이면?

401인경우 토큰을 갱신시키는 api를 호출하고, access_token을 새로 받은 다음에 config.header.Authorization을 설정해 준 다.

이후에 기존에 보냈던 axios 요청을 다시 보낸다.

import { IToken } from '@utils/state';
import axios from 'axios';
import Axios from 'axios';
import { useSetRecoilState } from 'recoil';
import { getAcessToken } from './account';
export const getAuthAxios = (token: IToken) => {
  const authAxios = Axios.create({
    headers: {
      Authorization: `${token.access}`,
    },
  });
  authAxios.interceptors.response.use(
    (res) => res,
    async (error) => {
      const {
        config,
        response: { status },
      } = error;
      if (status !== 401) {
        return Promise.reject(error);
      }
      const { access: newAccessToken } = await getAcessToken(token.refresh);

      config.headers.Authorization = `Bearer ${newAccessToken}`;
      const response=await axios.get(config.url,config);
      return response.data;
    },
  );
  return authAxios;
};

해당 인스턴스는 이렇게 사용했다.

 

메일인증을 하는 api

import { IToken } from '@utils/state';
import { getAuthAxios } from './authAxios';

export const getEmailSecret = async (token: IToken, emailValue: string) => {
  const axiosInstance = getAuthAxios(token);
  const response = await axiosInstance.get(`/api/accounts/caumail`, {
    params: { email: `${emailValue}@cau.ac.kr` },
  });
  return response;
};