From 3978156981d88cc045db0bdb9eba6a186aceedc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A4=80=ED=9D=A0?= Date: Fri, 16 Sep 2022 13:49:24 +0900 Subject: [PATCH] vue2_frontend... --- src/interceptors/auth.Iterceptor.js | 62 ------------------------- src/interceptors/auth.api.js | 67 ++++++++++++++++++++++++++- src/interceptors/iterceptor.js | 70 ----------------------------- src/interceptors/todo.Iterceptor.js | 63 -------------------------- src/main.js | 4 -- src/service/token.service.js | 12 ++--- 6 files changed, 71 insertions(+), 207 deletions(-) delete mode 100644 src/interceptors/auth.Iterceptor.js delete mode 100644 src/interceptors/iterceptor.js delete mode 100644 src/interceptors/todo.Iterceptor.js diff --git a/src/interceptors/auth.Iterceptor.js b/src/interceptors/auth.Iterceptor.js deleted file mode 100644 index a3e2999..0000000 --- a/src/interceptors/auth.Iterceptor.js +++ /dev/null @@ -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 diff --git a/src/interceptors/auth.api.js b/src/interceptors/auth.api.js index 69c1f7f..c2510cd 100644 --- a/src/interceptors/auth.api.js +++ b/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 diff --git a/src/interceptors/iterceptor.js b/src/interceptors/iterceptor.js deleted file mode 100644 index 3f44f05..0000000 --- a/src/interceptors/iterceptor.js +++ /dev/null @@ -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 diff --git a/src/interceptors/todo.Iterceptor.js b/src/interceptors/todo.Iterceptor.js deleted file mode 100644 index 0d62597..0000000 --- a/src/interceptors/todo.Iterceptor.js +++ /dev/null @@ -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 diff --git a/src/main.js b/src/main.js index c67bddf..8186f9f 100644 --- a/src/main.js +++ b/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({ diff --git a/src/service/token.service.js b/src/service/token.service.js index a2fa521..cce46fa 100644 --- a/src/service/token.service.js +++ b/src/service/token.service.js @@ -1,16 +1,16 @@ class TokenService { getLocalAccessToken() { - const user = JSON.parse(localStorage.getItem('user')) - return user?.accessToken + const user = this.getUser() + return user?.access_token } updateLocalAccessToken(token) { - let user = JSON.parse(localStorage.getItem('user')) - user.accessToken = token + let user = this.getUser() + user.access_token = token localStorage.setItem('user', JSON.stringify(user)) } getLocalRefreshToken() { - const user = JSON.parse(localStorage.getItem('user')) - return user?.refreshToken + const user = this.getUser() + return user?.refresh_token } getUser() { return JSON.parse(localStorage.getItem('user'))