React | axios interceptors header에 token값 설정&추가하기, 삭제하기

이번 프로젝트에서는 jwt 방식을 사용하여 로그인을 진행하였기에 헤더의 값을 유동적으로 설정해야 했습니다.

간단하게 jwt 로직을 설명해 보자면,

1. 로그인을 하면, 서버에서 accesstoken 과 refresh token을 받습니다.
2. 개인정보가 들어간 데이터들은 api를 요청할 때 header에 token 정보를 함께 담아 요청을 하는데 서버에서는 이 토큰값으로 개인에 맞는 데이터들을 뽑아서 전달해 줍니다.
3. 로그인했을 때에는 header에 토큰 값이 들어가진 상태로 api를 요청을 해야 하며 로그아웃 상태일 때에는 토큰 값이 없는 상태로 api를 요청해야 합니다. 

저희는 프로젝트에 공통값(header, 에러)들을 한 곳에서 처리하기 위해 axios interceptors을 사용했었는데요

그렇다면, api를 요청하기 전 설정에서 로그인하여 token 값을 가지고 있을 때에는 header에 값을 넣고 로그아웃하여 토큰값이 없을 때에는 header에 값을 삭제해보겠습니다. (token 값들은 localstorage로 관리)

 

// src > apis > ApiController.ts

instance.interceptors.request.use(
  (config: any) => {
    const accessToken = window.localStorage.getItem('accesstoken');
    const refreshToken = window.localStorage.getItem('refreshtoken');
    if (accessToken && refreshToken) {
      config.headers.Authorization = `Bearer ${accessToken}`;
      config.headers.Refresh = `${refreshToken}`;
    } else {
      delete config.headers.Authorization;
      delete config.headers.Refresh;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

interceptors.request.use 안에 config.headers.서버와 맞춘 키값으로 키와 밸류를 설정해 줍니다.

해당 키 값을 없애려면, delete를 앞에 붙여 없애줍니다.

 

 

 

 

---

헤더에 추가된 정보

 

 

---

https://blog.logrocket.com/using-axios-set-request-headers/