리프레시 토큰 로컬스토리지 저장 방식 구현 (#277)

* Refact: 리프레시 토큰 로컬스토리지 저장 방식 구현

리프레시 토큰이 쿠키에 저장되어 사용하던 로직을 로컬스토리지에 저장하고 사용하도록 변경

* Feat: 로그아웃 시 로컬스토리지에 있는 리프레시 토큰 삭제

backend/src/domain/auth/auth.controller.ts

@@ -28,7 +28,7 @@ export class AuthController {
     const { accessToken, refreshToken } = user;
 
     res.cookie("accessToken", accessToken, { httpOnly: true });
-    res.cookie("refreshToken", refreshToken, { httpOnly: true });
+    res.cookie("refreshToken", refreshToken);
 
     const redirectUrl = process.env.NODE_ENV === "dev" ? process.env.DEV_REDIRECT_URL : process.env.PROD_REDIRECT_URL;
 

backend/src/domain/auth/guard/jwt-refreshToken-auth-guard.ts

@@ -12,7 +12,7 @@ export class JwtRefreshTokenAuthGuard extends AuthGuard("jwt") {
     const request = context.switchToHttp().getRequest();
     const response = context.switchToHttp().getResponse();
 
-    const { refreshToken } = request.cookies;
+    const refreshToken = request.headers.refreshtoken;
 
     if (!refreshToken) throw new HttpException("No RefreshToken", 410);
 

frontend/src/api/index.ts

@@ -6,7 +6,13 @@ import { customAxios } from "@src/lib/customAxios";
 
 export const RefreshAPI = async () => {
   const URL = `/api/auth/refresh-token`;
-  await customAxios.get(URL);
+  const refreshToken = localStorage.getItem("refreshToken");
+  if (!refreshToken) throw new Error();
+  await customAxios.get(URL, {
+    headers: {
+      refreshToken: refreshToken as string,
+    },
+  });
 };
 
 export { AlbumAPI, GroupAPI, PostAPI, UserAPI };

frontend/src/lib/cookie.ts

@@ -0,0 +1,7 @@
+export const getCookie = (name: string) => {
+  let value = document.cookie.match(`(^|;) ?${name}=([^;]*)(;|$)`);
+  return value ? value[2] : null;
+};
+export const deleteCookie = (name: string) => {
+  document.cookie = name + "=; expires=Thu, 01 Jan 1999 00:00:10 GMT;";
+};

frontend/src/pages/Main/index.tsx

@@ -12,6 +12,7 @@ import { RootState } from "@src/reducer";
 import { useHistory } from "react-router-dom";
 import ToastManager from "@src/components/ToastMessage/ToastManager";
 import Spinner from "@components/Spinner";
+import { getCookie, deleteCookie } from "@src/lib/cookie";
 
 const Main = () => {
   const [isToggle, setIsToggle] = useState<boolean>(true);
@@ -84,6 +85,13 @@ const Main = () => {
 
   useEffect(() => {
     if (userInfoSucceed) {
+      const refreshToken = getCookie("refreshToken");
+
+      if (refreshToken) {
+        localStorage.setItem("refreshToken", refreshToken);
+        deleteCookie("refreshToken");
+      }
+
       dispatch(GroupAction.getGroupListAction());
       dispatch(UserAction.setUpdatedInitAction());
     }

frontend/src/sagas/user.ts

@@ -60,6 +60,7 @@ function* getLogOut() {
   try {
     yield call(getLogOutApi);
     yield put({ type: UserAction.LOG_OUT_SUCCEED });
+    localStorage.removeItem("refreshToken");
   } catch (err: any) {
     const { status } = err.response;
     if (status === 401) {