vue2_frontend...

src/interceptors/auth.Iterceptor.js

@@ -1,62 +0,0 @@
-import authApi from './auth.api'
-import tokenService from '../service/token.service'
-//참조: https://www.bezkoder.com/vue-refresh-token/
-const setup = (store) => {
-  //Request 처리용
-  authApi.interceptors.request.use(
-    (config) => {
-      const token = tokenService.getLocalAccessToken()
-      if (token) {
-        // config.headers["Authorization"] = 'Bearer ' + token;  // for Spring Boot back-end
-        config.headers['x-access-token'] = token // for Node.js Express back-end
-      }
-      return config
-    },
-    (error) => {
-      // Do something with request error
-      Promise.reject(error)
-    }
-  )
-
-  //Response 처리용
-  authApi.interceptors.response.use(
-    (response) => {
-      return response
-    },
-    async (err) => {
-      //err.config->이전에 보냈던 api (url등)정보 전달용
-      //err.response->오류 상태를 알기 위해
-      //originalConfig._retry는 처음 시도용인지 알기 위해
-      const originalConfig = err.config
-      if (originalConfig.url !== '/auth/login' && err.response) {
-        if (err.response.status === 401 && !originalConfig._retry) {
-          return await reloadAccessToken(originalConfig)
-        }
-      }
-      return Promise.reject(err)
-    }
-  )
-
-  //AccessToken이 만료된경우 다시 받기위한 함수
-  const reloadAccessToken = async (originalConfig) => {
-    // Access Token이 expired,오류로 인한 response 401 답볍을 받은경우
-    originalConfig._retry = true
-    try {
-      //Refresh Token으로 다시 Access Token 재생성 후 로그인 다시하라고 오류보냄
-      await authApi
-        .post('/auth/reload', {
-          refresh_token: tokenService.getLocalRefreshToken()
-        })
-        .then((rs) => {
-          const { access_token } = rs.data
-          store.dispatch('reload', access_token)
-          tokenService.updateLocalAccessToken(access_token)
-        })
-      //reload로 access_token을 재발급을 받았으면 이전 APICall 다시 호출
-      return await authApi(originalConfig)
-    } catch (_error) {
-      return Promise.reject(_error)
-    }
-  }
-}
-export default setup

src/interceptors/auth.api.js

@@ -1,5 +1,68 @@
 import axios from 'axios'
-const authApi = axios.create({
+import tokenService from '../service/token.service'
+const instance = axios.create({
   baseURL: process.env.VUE_APP_AUTH_HOST
 })
-export default authApi
+
+//API Request 전 처리용
+instance.defaults.headers.post['Content-Type'] =
+  'application/x-www-form-urlencoded'
+instance.defaults.headers.get['Accepts'] = 'application/json'
+instance.defaults.timeout = 2500
+
+//Request 처리용
+instance.interceptors.request.use(
+  (config) => {
+    const token = tokenService.getLocalAccessToken()
+    if (token) {
+      config.headers['Authorization'] = 'Bearer ' + token // for Spring Boot back-end
+      config.headers['x-access-token'] = token // for Node.js Express back-end
+    }
+    return config
+  },
+  (error) => {
+    // Do something with request error
+    Promise.reject(error)
+  }
+)
+
+//Response 처리용
+instance.interceptors.response.use(
+  (response) => {
+    return response
+  },
+  async (err) => {
+    //err.config->이전에 보냈던 api (url등)정보 전달용
+    //err.response->오류 상태를 알기 위해
+    //originalConfig._retry는 처음 시도용인지 알기 위해
+    const originalConfig = err.config
+    if (originalConfig.url !== '/auth/login' && err.response) {
+      if (err.response.status === 401 && !originalConfig._retry) {
+        return await reloadAccessToken(originalConfig)
+      }
+    }
+    return Promise.reject(err)
+  }
+)
+
+//AccessToken이 만료된경우 다시 받기위한 함수
+const reloadAccessToken = async (originalConfig) => {
+  // Access Token이 expired,오류로 인한 response 401 답볍을 받은경우
+  originalConfig._retry = true
+  try {
+    //Refresh Token으로 다시 Access Token 재생성 후 로그인 다시하라고 오류보냄
+    await instance
+      .post('/auth/reload', {
+        refresh_token: tokenService.getLocalRefreshToken()
+      })
+      .then((rs) => {
+        const { access_token } = rs.data
+        tokenService.updateLocalAccessToken(access_token)
+      })
+    //reload로 access_token을 재발급을 받았으면 이전 APICall 다시 호출
+    return await instance(originalConfig)
+  } catch (_error) {
+    return Promise.reject(_error)
+  }
+}
+export default instance

src/interceptors/iterceptor.js

@@ -1,70 +0,0 @@
-import axios from 'axios'
-import authApi from './auth.api'
-import tokenService from '../service/token.service'
-//참조: https://www.bezkoder.com/vue-refresh-token/
-
-const interceptor = () => {
-  //API Request 전 처리용
-  axios.defaults.headers.post['Content-Type'] =
-    'application/x-www-form-urlencoded'
-  axios.defaults.headers.get['Accepts'] = 'application/json'
-  axios.defaults.timeout = 2500
-
-  //Request 처리용
-  axios.interceptors.request.use(
-    (config) => {
-      const token = tokenService.getLocalAccessToken()
-      if (token) {
-        config.headers['Authorization'] = 'Bearer ' + token // for Spring Boot back-end
-        config.headers['x-access-token'] = token // for Node.js Express back-end
-      }
-      return config
-    },
-    (error) => {
-      // Do something with request error
-      Promise.reject(error)
-    }
-  )
-
-  //Response 처리용
-  axios.interceptors.response.use(
-    (response) => {
-      return response
-    },
-    async (err) => {
-      //err.config->이전에 보냈던 api (url등)정보 전달용
-      //err.response->오류 상태를 알기 위해
-      //originalConfig._retry는 처음 시도용인지 알기 위해
-      const originalConfig = err.config
-      if (originalConfig.url !== '/auth/login' && err.response) {
-        if (err.response.status === 401 && !originalConfig._retry) {
-          return await reloadAccessToken(originalConfig)
-        }
-      }
-      return Promise.reject(err)
-    }
-  )
-
-  //AccessToken이 만료된경우 다시 받기위한 함수
-  const reloadAccessToken = async (originalConfig) => {
-    // Access Token이 expired,오류로 인한 response 401 답볍을 받은경우
-    originalConfig._retry = true
-    try {
-      //Refresh Token으로 다시 Access Token 재생성 후 로그인 다시하라고 오류보냄
-      await authApi
-        .post('/auth/reload', {
-          refresh_token: tokenService.getLocalRefreshToken()
-        })
-        .then((rs) => {
-          const { access_token } = rs.data
-          tokenService.updateLocalAccessToken(access_token)
-        })
-      //reload로 access_token을 재발급을 받았으면 이전 APICall 다시 호출
-      return await axios(originalConfig)
-    } catch (_error) {
-      return Promise.reject(_error)
-    }
-  }
-}
-
-export default interceptor

src/interceptors/todo.Iterceptor.js

@@ -1,63 +0,0 @@
-import todoApi from './todo.api'
-import authApi from './auth.api'
-import tokenService from '../service/token.service'
-//참조: https://www.bezkoder.com/vue-refresh-token/
-const setup = (store) => {
-  //Request 처리용
-  todoApi.interceptors.request.use(
-    (config) => {
-      const token = tokenService.getLocalAccessToken()
-      if (token) {
-        // config.headers["Authorization"] = 'Bearer ' + token;  // for Spring Boot back-end
-        config.headers['x-access-token'] = token // for Node.js Express back-end
-      }
-      return config
-    },
-    (error) => {
-      // Do something with request error
-      Promise.reject(error)
-    }
-  )
-
-  //Response 처리용
-  todoApi.interceptors.response.use(
-    (response) => {
-      return response
-    },
-    async (err) => {
-      //err.config->이전에 보냈던 api (url등)정보 전달용
-      //err.response->오류 상태를 알기 위해
-      //originalConfig._retry는 처음 시도용인지 알기 위해
-      const originalConfig = err.config
-      if (originalConfig.url !== '/auth/login' && err.response) {
-        if (err.response.status === 401 && !originalConfig._retry) {
-          return await reloadAccessToken(originalConfig)
-        }
-      }
-      return Promise.reject(err)
-    }
-  )
-
-  //AccessToken이 만료된경우 다시 받기위한 함수
-  const reloadAccessToken = async (originalConfig) => {
-    // Access Token이 expired,오류로 인한 response 401 답볍을 받은경우
-    originalConfig._retry = true
-    try {
-      //Refresh Token으로 다시 Access Token 재생성 후 로그인 다시하라고 오류보냄
-      await authApi
-        .post('/auth/reload', {
-          refresh_token: tokenService.getLocalRefreshToken()
-        })
-        .then((rs) => {
-          const { access_token } = rs.data
-          store.dispatch('reload', access_token)
-          tokenService.updateLocalAccessToken(access_token)
-        })
-      //reload로 access_token을 재발급을 받았으면 이전 APICall 다시 호출
-      return await authApi(originalConfig)
-    } catch (_error) {
-      return Promise.reject(_error)
-    }
-  }
-}
-export default setup

src/main.js

@@ -27,10 +27,6 @@ localize('ko', ko)
 Vue.component('ValidationObserver', ValidationObserver)
 Vue.component('ValidationProvider', ValidationProvider)
 
-//인터셉터 정의 및 Storage 연동
-import interceptor from './interceptors/iterceptor'
-interceptor()
-
 Vue.config.productionTip = false
 Vue.use(BootstrapVue)
 new Vue({

src/service/token.service.js

@@ -1,16 +1,16 @@
 class TokenService {
   getLocalAccessToken() {
-    const user = JSON.parse(localStorage.getItem('user'))
+    const user = this.getUser()
-    return user?.accessToken
+    return user?.access_token
   }
   updateLocalAccessToken(token) {
-    let user = JSON.parse(localStorage.getItem('user'))
+    let user = this.getUser()
-    user.accessToken = token
+    user.access_token = token
     localStorage.setItem('user', JSON.stringify(user))
   }
   getLocalRefreshToken() {
-    const user = JSON.parse(localStorage.getItem('user'))
+    const user = this.getUser()
-    return user?.refreshToken
+    return user?.refresh_token
   }
   getUser() {
     return JSON.parse(localStorage.getItem('user'))