[React] class 를 사용한 전역 상태 accessToken

React 앱에서 login 후 accessToken 을 서버로부터 발급받아 전역 상태로 관리하여 인증이 필요한 api 요청시마다 header 에 넣어줄 때 겪었던 troubleshooting 기록입니다.

웹에서 인증 기능을 구현하는데, 로그인 성공 후 서버로부터 받은 accessToken 을 저장할 곳이 필요했다. 처음에는 브라우저 localStorage 에 저장을 하려고 했는데 탈취 위험이 높을 것 같아 앱 전역 상태에 숨겨두고 외부에서 탈취할 수 없도록 구현계획을 바꾸었다.

전역 상태: Recoil 을 쓸까? → 안 된다.

팀 내에서 전역 상태는 Recoil 라이브러리를 쓰기로 결정했었기 때문에 처음에는 Recoil 로 해보려고 했으나 실패했다. Recoil 은 React hook 기반이어서 React component 가 아닌 곳에서는 쓸 수 없기 때문에 accessToken 을 저장하는 용도로 사용할 수 없었다.

api request 를 하기 전에 모든 요청이 한 함수를 통해서 가도록 util 함수를 만들어 두었는데, 이 함수에서 header 에 Bearer ${accessToken} 을 넣어주기 위해서는 전역 상태에 저장되어 있는 access Token 을 읽어올 수 있어야 한다. 그런데 이 함수는 React component 가 아니기 때문에 recoil 을 사용할 수 없었다.

해결: AccessToken class 로 만들어서 쓰자.

로그인 후 서버로부터 발급받은 accessToken 을 저장할 AuthToken class 를 만든다.

class AuthToken {
  private _token: string;

  constructor() {
    this._token = "";
  }

  getToken() {
    return this._token;
  }

  setToken(newToken: string) {
    this._token = newToken;
  }
}

export const authToken = new AuthToken();

앱이 실행될 때마다 이 AuthToken class 또한 새로 생성된다. 페이지가 리로드 될 때마다 앱은 재실행되는데, 이때마다 새로 token 을 갱신 후 재발급 받도록 구현할 것이라서 AuthToken class 의 token 값이 초기화되어도 상관이 없다.

대신 앱이 리로드 되기 전까지는 이 class 는 한번만 생성되어 this._token 을 변경하 수 있는 것은 setToken 메소드를 실행시켰을 때 뿐이라 안전하다.

이제 authToken.setToken(accessToken); 을 sign-in 코드 다음 줄에 넣어주면 전역상태로 accessToken 을 가질 수 있게 되고, accessToken 이 있어야만 호출할 수 있는 api 들을 호출할 때 getToken 으로 가져와 Authorization header 에 넣어주면 된다.

axios 공통 함수 예시

export const request = async ({ ...options }: any) => {
  let accessToken = authToken.getToken();
  // validate accessToken expiration
  if (accessToken && parseJwt(accessToken).exp < Date.now() / 1000) {
    // accessToken 만료시 refresh token 으로 재발급
    const response = await axiosInstance.post("/auth/refresh", {
      deviceId: localStorage.getItem("deviceId"),
    });
    accessToken = response.data;
    authToken.setToken(accessToken);
  }
  // axios에 withCredentials를 true로 설정해줘야 refreshToken cookie를 주고받을 수 있다.
  axiosInstance.defaults.withCredentials = true;
  axiosInstance.defaults.headers.common[
    "Authorization"
  ] = `Bearer ${accessToken}`;

  const onSuccess = (response: any) => response;
  const onError = (error: any) => {
    ... error flow
    throw error;
  };

  try {
    const response = await axiosInstance(options);
    return onSuccess(response);
  } catch (error) {
    return onError(error);
  }
};