🔀 토큰 제거 오류

api/TokenManager.ts

@@ -1,5 +1,6 @@
 import { accessToken, refreshToken, accessExp, refreshExp } from '@/lib/token'
 import { TokensType } from '@/type/api/TokenManager'
+import Router from 'next/router'
 
 class TokenManager {
   private _accessToken: string | null = null
@@ -55,6 +56,8 @@ class TokenManager {
     localStorage.removeItem(refreshToken)
     localStorage.removeItem(accessExp)
     localStorage.removeItem(refreshExp)
+
+    Router.push('/')
   }
 
   get accessToken() {

api/index.ts

@@ -6,6 +6,9 @@ import TokenManager from './TokenManager'
 const API = axios.create({
   baseURL: process.env.NEXT_PUBLIC_SERVER_URL,
   withCredentials: true,
+  headers: {
+    'ngrok-skip-browser-warning': '69420',
+  },
 })
 
 API.interceptors.request.use(async (config) => {
@@ -36,10 +39,32 @@ API.interceptors.request.use(async (config) => {
     tokenManager.removeTokens()
 
   config.headers['Authorization'] = tokenManager.accessToken
-    ? `Bearer ${tokenManager.accessToken}`
+    ? `Bearer ${encodeURI(tokenManager.accessToken)}`
     : undefined
 
   return config
 })
 
+API.interceptors.response.use(
+  (res) => {
+    return res
+  },
+  async (error) => {
+    const tokenManager = new TokenManager()
+    if (window.location.pathname !== '/' && error.response.status === 401) {
+      try {
+        await store.dispatch(reissueToken())
+        tokenManager.initToken()
+        error.config.headers['Authorization'] = tokenManager.accessToken
+          ? `Bearer ${encodeURI(tokenManager.accessToken)}`
+          : undefined
+        return API(error.config)
+      } catch (err) {
+        console.log(error)
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
 export default API

store/reissue.ts

@@ -1,10 +1,15 @@
+import TokenManager from '@/api/TokenManager'
+import { useLoggedIn } from '@/hooks'
+import observable from '@/lib/Observable'
+import toastOption from '@/lib/toastOption'
+import { TokensType } from '@/type/api/TokenManager'
 import { InitialState } from '@/type/store/reissue'
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'
-import TokenManager from '@/api/TokenManager'
 import axios from 'axios'
-import { TokensType } from '@/type/api/TokenManager'
+import Router from 'next/router'
+import { toast } from 'react-toastify'
 import { RootState } from '.'
-import observable from '@/lib/Observable'
+import { removeUser } from './user'
 
 export const reissueToken = createAsyncThunk(
   'reissue/reissueToken',
@@ -25,23 +30,32 @@ export const reissueToken = createAsyncThunk(
     dispatch(
       setRefreshTiming({ isLoading: true, refreshDate: new Date().toString() })
     )
-    const { data } = await axios.patch<TokensType>(
-      '/auth',
-      {},
-      {
-        baseURL: process.env.NEXT_PUBLIC_SERVER_URL,
-        withCredentials: true,
-        headers: {
-          'Refresh-Token':
-            tokenManager.refreshToken && `Bearer ${tokenManager.refreshToken}`,
-        },
-      }
-    )
-    observable.notifyAll()
-    observable.removeAll()
+    try {
+      const { data } = await axios.patch<TokensType>(
+        '/auth',
+        {},
+        {
+          baseURL: process.env.NEXT_PUBLIC_SERVER_URL,
+          withCredentials: true,
+          headers: {
+            'Refresh-Token':
+              tokenManager.refreshToken &&
+              `Bearer ${tokenManager.refreshToken}`,
+          },
+        }
+      )
+      observable.notifyAll()
+      observable.removeAll()
 
-    tokenManager.setTokens(data)
-    return data
+      tokenManager.setTokens(data)
+      return data
+    } catch (e) {
+      dispatch(removeUser())
+      tokenManager.removeTokens()
+      toast.error('다시 로그인 해주세요', toastOption)
+      console.log(Router.route)
+      return useLoggedIn({})
+    }
   }
 )