[리팩터링] Axios (#97)

* fix: 폴더명 변경

* feat: 환경변수 추가
constants에 환경변수 추가하였습니다.

* chore: 절대경로 수정, experimentalDecorators활성화
Library 하위 절대경로를 @Library로 통합하였습니다.
Constants 절대경로를 추가하였습니다.
Decorator 사용을 위해 experimentalDecorators활성화하였습니다.

* chore: 일부룰 오프
@typescript-eslint/lines-between-class-members 프로퍼티간의 공백 룰을 오프하였습니다.
class-methods-use-this 메서드에서 this를 사용하지 않는 경우가 존재하여 룰을 오프하였습니다.

* fix: 기존 파일 api 유틸리티 이동

* feat: static으로 설정한 exception에 사용할 상수 변수

* feat: exception interface 추가

* feat: axios 요청별 error

* feat: axios 레핑
exception이 포함된 interceptors 오버라이드

* feat: auth
repository, service, decorator 작성
authService 기본 내보내기

* feat: Users
repository, service, decorator 작성
userService 기본 내보내기

* feat: api 내보내기 추가

* feat: 인증 데코레이터 추가

* fix: 코드 수정
절대경로 수정
axios 코드 리팩터링으로 인한 수정
modal에 필요없는 코드 삭제

* fix: 절대경로 수정

* fix: 이전코드 삭제

* feat: images domains 추가

* fix: 변수 분리
상수 변수를 외부에서 가져오기로 수정

* chore: tilog-api update

* fix: code smell

Author: MINJE-98

.eslintrc.json

@@ -22,6 +22,8 @@
     "plugin:prettier/recommended"
   ],
   "rules": {
+    "@typescript-eslint/lines-between-class-members": "off",
+    "class-methods-use-this": "off",
     "import/order": [
       "error",
       {

constants/environment/index.ts

@@ -0,0 +1,3 @@
+const { TILOG_API } = process.env;
+
+export default TILOG_API;

lib/api/auth/authRepository.ts

@@ -0,0 +1,13 @@
+import { AxiosInstance } from "axios";
+
+import { AuthApi, Configuration } from "@til-log.lab/tilog-api";
+
+export default class AuthRepository extends AuthApi {
+  constructor(
+    axios?: AxiosInstance,
+    basePath?: string,
+    configuration?: Configuration
+  ) {
+    super(configuration, basePath, axios);
+  }
+}

lib/api/auth/authService.ts

@@ -0,0 +1,33 @@
+import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
+
+import AuthRepository from "@Library/api/auth/authRepository";
+import validateToken from "@Library/api/auth/validateTokenDecorator";
+import ExceptionInterface from "@Library/api/exception/interface";
+
+export default class AuthService {
+  constructor(
+    private readonly authRepository: AuthRepository,
+    private readonly axios: AxiosInstance
+  ) {}
+  @validateToken()
+  deleteRefreshToken(
+    options?: AxiosRequestConfig<ExceptionInterface>
+  ): Promise<AxiosResponse<void, ExceptionInterface>> {
+    return this.authRepository.usersAuthControllerDeleteRefreshToken({
+      ...options,
+      withCredentials: true,
+    });
+  }
+
+  async getAccessTokenUsingRefreshToken(
+    userAgent?: string,
+    options?: AxiosRequestConfig<ExceptionInterface>
+  ): Promise<void> {
+    const { data } =
+      await this.authRepository.usersAuthControllerGetAccessTokenUsingRefreshToken(
+        userAgent,
+        { ...options, withCredentials: true }
+      );
+    this.axios.defaults.headers.common.Authorization = `bearer ${data.accessToken}`;
+  }
+}

lib/api/auth/index.ts

@@ -0,0 +1,9 @@
+import TILOG_API from "@Constants/environment";
+import AuthRepository from "@Library/api/auth/authRepository";
+import AuthService from "@Library/api/auth/authService";
+import httpClient from "@Library/api/httpClient";
+
+const authRepository = new AuthRepository(httpClient.http, TILOG_API);
+const authService = new AuthService(authRepository, httpClient.http);
+
+export default authService;

lib/api/auth/validateTokenDecorator.ts

@@ -0,0 +1,25 @@
+/* eslint-disable func-names */
+/* eslint-disable no-param-reassign */
+
+import http from "@Library/api";
+import httpClient from "@Library/api/httpClient";
+import getAccessTokenToAxiosHeader from "@Library/api/utility/getAccessTokenToAxiosHeader";
+import isTokenExpired from "@Library/api/utility/isTokenExpired";
+
+export default function validateToken() {
+  return (
+    _target: any,
+    _propertyKey: string,
+    descriptor: PropertyDescriptor
+  ) => {
+    const originMethod = descriptor.value;
+    descriptor.value = async function (...args: unknown[]) {
+      const accessToken = getAccessTokenToAxiosHeader(httpClient.http);
+
+      if (!accessToken || isTokenExpired(accessToken)) {
+        await http.authService.getAccessTokenUsingRefreshToken();
+      }
+      return originMethod.apply(this, args);
+    };
+  };
+}

lib/api/exception/constant/requestLocation.ts

@@ -0,0 +1,2 @@
+export const UNKNOWN_LOCATION = "Axios_Unknown";
+export const REQUEST_LOCATION = "Axios_Request";

lib/api/exception/constant/statusCode.ts

@@ -0,0 +1 @@
+export const INTERNAL_SERVER_ERROR = 500;

lib/api/exception/interface/index.ts

@@ -0,0 +1,7 @@
+import MessageInterface from "lib/messages/interface";
+
+export default interface ExceptionInterface {
+  readonly statusCode: number;
+  readonly requestLocation: string;
+  readonly message: MessageInterface;
+}

lib/api/exception/requestError.ts

@@ -0,0 +1,17 @@
+import { REQUEST_LOCATION } from "@Library/api/exception/constant/requestLocation";
+import { INTERNAL_SERVER_ERROR } from "@Library/api/exception/constant/statusCode";
+import ExceptionInterface from "@Library/api/exception/interface";
+import { NETWORK_ERROR_MESSAGE } from "@Library/messages/constants/error";
+import MessageInterface from "@Library/messages/interface";
+
+export default class RequestError implements ExceptionInterface {
+  readonly statusCode: number;
+  readonly requestLocation: string;
+  readonly message: MessageInterface;
+
+  constructor() {
+    this.statusCode = INTERNAL_SERVER_ERROR;
+    this.requestLocation = REQUEST_LOCATION;
+    this.message = NETWORK_ERROR_MESSAGE;
+  }
+}

lib/api/exception/responseError.ts

@@ -0,0 +1,19 @@
+import ExceptionInterface from "@Library/api/exception/interface";
+import { NOT_EXIST_MESSAGE } from "@Library/messages/constants/error";
+import MessageInterface from "@Library/messages/interface";
+
+export default class ResponseError implements ExceptionInterface {
+  readonly statusCode: number;
+  readonly requestLocation: string;
+  readonly message: MessageInterface;
+
+  constructor(errorObject: ExceptionInterface) {
+    this.statusCode = errorObject.statusCode;
+    this.requestLocation = errorObject.requestLocation;
+    this.message = errorObject.message;
+
+    if (!this.message) {
+      this.message = NOT_EXIST_MESSAGE;
+    }
+  }
+}

lib/api/exception/unknownError.ts

@@ -0,0 +1,17 @@
+import { UNKNOWN_LOCATION } from "@Library/api/exception/constant/requestLocation";
+import { INTERNAL_SERVER_ERROR } from "@Library/api/exception/constant/statusCode";
+import ExceptionInterface from "@Library/api/exception/interface";
+import { NETWORK_ERROR_MESSAGE } from "@Library/messages/constants/error";
+import MessageInterface from "@Library/messages/interface";
+
+export default class UnknownError implements ExceptionInterface {
+  readonly statusCode: number;
+  readonly requestLocation: string;
+  readonly message: MessageInterface;
+
+  constructor() {
+    this.statusCode = INTERNAL_SERVER_ERROR;
+    this.requestLocation = UNKNOWN_LOCATION;
+    this.message = NETWORK_ERROR_MESSAGE;
+  }
+}

lib/api/httpClient.ts

@@ -0,0 +1,38 @@
+import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from "axios";
+
+import RequestError from "@Library/api/exception/requestError";
+import ResponseError from "@Library/api/exception/responseError";
+import UnknownError from "@Library/api/exception/unknownError";
+
+class HttpClient {
+  public http: AxiosInstance;
+
+  constructor(config: AxiosRequestConfig) {
+    this.http = axios.create(config);
+    this.interceptors();
+  }
+  private interceptors = () => {
+    this.http.interceptors.response.use(
+      (response) => response,
+      (error) => this.interceptorError(error)
+    );
+  };
+
+  private interceptorError = (error: AxiosError) => {
+    // NOTE: 서버에서 응답한 상태
+    if (error.response) {
+      const { data } = error.response;
+      return Promise.reject(new ResponseError(data));
+    }
+
+    // NOTE: 서버에서 응답하지 못한 상태
+    if (error.request) {
+      return Promise.reject(new RequestError());
+    }
+
+    // NOTE: 요청, 응답이 모두 이루지지 않은 상태
+    return Promise.reject(new UnknownError());
+  };
+}
+
+export default new HttpClient({});

lib/api/index.ts

@@ -0,0 +1,7 @@
+import authService from "@Library/api/auth";
+import usersService from "@Library/api/users";
+
+export default {
+  authService,
+  usersService,
+};

lib/api/users/index.ts

@@ -0,0 +1,9 @@
+import TILOG_API from "@Constants/environment";
+import httpClient from "@Library/api/httpClient";
+import UserRepository from "@Library/api/users/userRepository";
+import UserService from "@Library/api/users/userService";
+
+const userRepository = new UserRepository(httpClient.http, TILOG_API);
+const usersService = new UserService(userRepository);
+
+export default usersService;

lib/api/users/userRepository.ts

@@ -0,0 +1,13 @@
+import { AxiosInstance } from "axios";
+
+import { UserApi, Configuration } from "@til-log.lab/tilog-api";
+
+export default class UserRepository extends UserApi {
+  constructor(
+    axios?: AxiosInstance,
+    basePath?: string,
+    configuration?: Configuration
+  ) {
+    super(configuration, basePath, axios);
+  }
+}

lib/api/users/userService.ts

@@ -0,0 +1,46 @@
+import { AxiosRequestConfig, AxiosResponse } from "axios";
+
+import validateToken from "@Library/api/auth/validateTokenDecorator";
+import ExceptionInterface from "@Library/api/exception/interface";
+import UserRepository from "@Library/api/users/userRepository";
+
+import {
+  GetMeResponseDto,
+  GetUserProfileResponseDto,
+  SetSettingRequestBodyDto,
+  SetSettingRequestBodyDtoSettingTypeEnum,
+} from "@til-log.lab/tilog-api";
+
+export default class UserService {
+  constructor(private readonly userRepository: UserRepository) {}
+
+  @validateToken()
+  getMe(
+    options?: AxiosRequestConfig<ExceptionInterface>
+  ): Promise<AxiosResponse<GetMeResponseDto, ExceptionInterface>> {
+    return this.userRepository.usersControllerGetMe(options);
+  }
+
+  getUserProfile(
+    userId: number,
+    options?: AxiosRequestConfig<ExceptionInterface>
+  ): Promise<AxiosResponse<GetUserProfileResponseDto, ExceptionInterface>> {
+    return this.userRepository.usersControllerGetUserProfile(userId, options);
+  }
+
+  @validateToken()
+  setSetting(
+    content: string | null,
+    settingType: SetSettingRequestBodyDtoSettingTypeEnum,
+    options?: AxiosRequestConfig<ExceptionInterface>
+  ): Promise<AxiosResponse<void, ExceptionInterface>> {
+    const setSettingRequestBodyDto: SetSettingRequestBodyDto = {
+      content,
+      settingType,
+    };
+    return this.userRepository.usersControllerSetSetting(
+      setSettingRequestBodyDto,
+      options
+    );
+  }
+}

lib/api/utility/getAccessTokenToAxiosHeader.ts

@@ -0,0 +1,11 @@
+import { AxiosInstance } from "axios";
+
+export default function getAccessTokenToAxiosHeader(
+  axios: AxiosInstance
+): string | null {
+  const accessToken = axios.defaults.headers.common.Authorization;
+  if (!accessToken) {
+    return null;
+  }
+  return accessToken.toString().slice(7);
+}

lib/auth/utility/isTokenExpired.ts lib/api/utility/isTokenExpired.ts

@@ -6,6 +6,6 @@ export default function isTokenExpired(
   const payloadBase64 = token.split(".")[1];
   const decodedJson = Buffer.from(payloadBase64, "base64").toString();
   const decoded = JSON.parse(decodedJson);
-  const exp = decoded.exp;
+  const { exp } = decoded;
   return Date.now() >= exp * 1000;
 }

lib/auth/utility/setAccessTokenToAxiosHeader.ts lib/api/utility/setAccessTokenToAxiosHeader.ts

@@ -1,10 +1,9 @@
-import axiosInstance from "@Api/axiosInstance";
+import httpClient from "@Library/api/httpClient";
+
 import { GetAccessTokenUsingRefreshTokenResponse } from "@til-log.lab/tilog-api";
 
 export default function setAccessTokenToAxiosHeader(
   accessToken: GetAccessTokenUsingRefreshTokenResponse["accessToken"]
 ) {
-  axiosInstance.defaults.headers.common[
-    "Authorization"
-  ] = `bearer ${accessToken}`;
+  httpClient.http.defaults.headers.common.Authorization = `bearer ${accessToken}`;
 }