♻️ refactor : Modify the apiUtils function

- Fixed the tokens on the nest and gin servers to be associated so that requests are sent with the same token
- Fix to clear data from intro on logout

Related issue: YJU-OKURA#104

Author: dorimu0

src/api/apiUtils.ts

@@ -4,16 +4,15 @@ import HTTP_STATUS from './httpStatus';
 
 const api = axios.create();
 
-// api.interceptors.request.use(async config => {
-//   const token = localStorage.getItem('access_token');
+api.interceptors.request.use(async config => {
+  const token = localStorage.getItem('access_token');
 
-//   if (token) {
-//     config.headers.Authorization = `Bearer ${token}`;
-//   }
-//   console.log(config);
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
 
-//   return config;
-// });
+  return config;
+});
 
 api.interceptors.response.use(
   response => {
@@ -24,14 +23,16 @@ api.interceptors.response.use(
     // トークンの有効期限が切れていて、トークン更新要求がない場合
     if (error.response.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
-      const refreshToken = localStorage.getItem('refresh_token');
+      const body = {
+        refresh_token: localStorage.getItem('refresh_token'),
+      };
       try {
-        const res = await axios.post(`${BASE_URLS.gin}/auth/refresh-token`, {
-          refreshToken,
-        });
+        const res = await axios.post(
+          `${BASE_URLS.gin}/auth/google/refresh-token`,
+          body
+        );
         if (res.status === 200) {
-          const newToken = res.data.access_token;
-          console.log(newToken);
+          const newToken = res.data.data.access_token;
           localStorage.setItem('access_token', newToken);
           api.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;
           // トークンが更新された後、元のリクエストを再実行
@@ -52,10 +53,6 @@ const req = async (
   body: object | undefined = undefined
 ) => {
   api.defaults.baseURL = BASE_URLS[server];
-  if (server === 'nest') {
-    api.defaults.headers.common['Authorization'] =
-      process.env.NEXT_PUBLIC_NEST_TOKEN;
-  }
 
   if (typeof body !== 'undefined') {
     if (body instanceof FormData) {

src/app/intro/page.tsx

@@ -3,8 +3,11 @@ import {useEffect, useState} from 'react';
 import Image from 'next/image';
 import {Login} from './components/login';
 import intro from '@/public/svgs/intro';
+import {useSetRecoilState} from 'recoil';
+import userState from '@/src/recoil/atoms/userState';
 
 const Page = () => {
+  const setUser = useSetRecoilState(userState);
   const [isOpen, setIsOpen] = useState(false);
 
   const openModal = () => {
@@ -24,6 +27,10 @@ const Page = () => {
 
   useEffect(() => {
     document.addEventListener('mousedown', handleOutsideClick);
+
+    setUser(null);
+    localStorage.clear();
+
     return () => {
       document.removeEventListener('mousedown', handleOutsideClick);
     };

src/components/navbar/profile/Profile.tsx

@@ -1,7 +1,6 @@
 import {useState} from 'react';
 import Image from 'next/image';
-import {useSetRecoilState} from 'recoil';
-import userState from '@/src/recoil/atoms/userState';
+import {useRouter} from 'next/navigation';
 import EditName from './EditName';
 import Warning from '../../warning/Warning';
 import putUserName from '@/src/api/classUser/putUserName';
@@ -11,7 +10,7 @@ import ClassUser from '@/src/model/User';
 import icons from '@/public/svgs/navbar';
 
 const Profile = ({user, params}: {user: User; params: ParamsProps}) => {
-  const setUser = useSetRecoilState(userState);
+  const router = useRouter();
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
   const [isEditOpen, setIsEditOpen] = useState<boolean>(false);
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -32,9 +31,7 @@ const Profile = ({user, params}: {user: User; params: ParamsProps}) => {
   };
 
   const handleClickLogout = () => {
-    setUser(null);
-    localStorage.clear();
-    console.log('logout');
+    router.push('/intro');
   };
 
   return (