implement refresh token in fetcher

web/src/pages/components/Navbar.tsx

@@ -20,6 +20,7 @@ const Navbar: React.FC<Props> = ({ user }) => {
   const logout = async () => {
     await req.post('/auth/logout')
     JSCookie.remove('authorization')
+    localStorage.removeItem('refreshToken')
     location.replace('/')
   }
 

web/src/utils/Fetcher.ts

@@ -8,12 +8,25 @@ export const req = axios.create({
 })
 
 export const fetcher = async (url: string, authorization?: string): Promise<any> => {
-  try {
+  const fetch = async () => {
     const { data } = await req.get(url, {
       ...authorization ? { headers: { authorization: `Bearer ${authorization}` } } : {},
       withCredentials: true })
     return data
+  }
+
+  try {
+    return await fetch()
   } catch ({ response }) {
+    if ((response as any)?.status === 401 && localStorage.getItem('refreshToken')) {
+      try {
+        const { data } = await req.post('/auth/refreshToken', { refreshToken: localStorage.getItem('refreshToken') })
+        localStorage.setItem('refreshToken', data.refreshToken)
+        return await fetch()
+      } catch (error) {
+        throw response
+      }
+    }
     throw response
   }
 }