vue2_frontend...

src/components/LoginComponent.vue

@@ -49,7 +49,6 @@
 
 <script>
 // 참고 : https://kdydesign.github.io/2019/04/06/vuejs-vuex-helper/
-import authService from '../service/auth.service'
 export default {
   data() {
     //console.log(this.$route)
@@ -82,7 +81,8 @@ export default {
     },
     async onSubmit() {
       try {
-        await authService.login(this.form.email, this.form.password)
+        const params = { email: this.form.email, password: this.form.password }
+        await this.$store.dispatch('AuthStore/login', params)
         await this.$router.push({
           name: this.$route.params.return_url || 'home'
         })

src/components/todo/ListComponent.vue

@@ -136,7 +136,6 @@
   </div>
 </template>
 <script>
-import todoService from '@/service/todo.service'
 import { createNamespacedHelpers } from 'vuex'
 const todoStore = createNamespacedHelpers('TodoStore')
 export default {
@@ -260,8 +259,7 @@ export default {
           filterDateStart: this.filterDateStart,
           filterDateEnd: this.filterDateEnd
         }
-        const datas = await todoService.getDatas(params)
+        this.$store.dispatch('TodoStore/setDatas', params)
-        this.$store.dispatch('TodoStore/setDatas', datas)
       } catch (e) {
         alert(e.message)
       }

src/interceptors/auth.api.js

@@ -1,72 +1,7 @@
 import axios from 'axios'
-import tokenService from '../service/token.service'
+import interceptor from './interceptor'
 const instance = axios.create({
   baseURL: process.env.VUE_APP_AUTH_HOST
 })
-
+interceptor(instance)
-//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) => {
-    console.log('성공')
-    console.log(response)
-    return response
-  },
-  async (err) => {
-    console.log('실패')
-    console.log(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/interceptor.js

@@ -0,0 +1,70 @@
+import tokenService from '../service/token.service'
+
+const interceptor = (instance) => {
+  //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) => {
+      console.log('interceptor 성공')
+      //console.log(response)
+      return response
+    },
+    async (err) => {
+      console.log('interceptor 실패')
+      //console.log(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 interceptor

src/interceptors/todo.api.js

@@ -1,73 +1,7 @@
 import axios from 'axios'
-import authApi from './auth.api'
+import interceptor from './interceptor'
-import tokenService from '../service/token.service'
 const instance = axios.create({
   baseURL: process.env.VUE_APP_TODO_HOST
 })
-
+interceptor(instance)
-//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) => {
-    console.log('성공')
-    console.log(response)
-    return response
-  },
-  async (err) => {
-    console.log('실패')
-    console.log(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 instance(originalConfig)
-  } catch (_error) {
-    return Promise.reject(_error)
-  }
-}
 export default instance

src/service/auth.service.js

@@ -1,30 +0,0 @@
-import api from '../interceptors/auth.api'
-import tokenService from '../service/token.service'
-class AuthService {
-  async login(email, password) {
-    return await api
-      .post('/auth/login', { email: email, password: password })
-      .then((response) => {
-        const { data } = response
-        if (data.access_token) {
-          tokenService.setUser(data)
-        }
-      })
-  }
-
-  logout() {
-    tokenService.removeUser()
-  }
-
-  async register(email, password, name) {
-    return api
-      .post('/auth/register', { email: email, password: password, name: name })
-      .then((response) => {
-        const { data } = response
-        if (data.access_token) {
-          tokenService.setUser(data)
-        }
-      })
-  }
-}
-export default new AuthService()

src/service/todo.service.js

@@ -1,11 +0,0 @@
-import api from '../interceptors/todo.api'
-class TodoService {
-  async getDatas(params) {
-    //console.log(params)
-    return await api.get('/todo', { params: params }).then((response) => {
-      const { data } = response
-      return data
-    })
-  }
-}
-export default new TodoService()

src/service/token.service.js

@@ -11,7 +11,7 @@ class TokenService {
   updateLocalAccessToken(token) {
     let user = this.getUser()
     user.access_token = token
-    localStorage.setItem('user', JSON.stringify(user))
+    this.setUser(user)
   }
   getLocalRefreshToken() {
     const user = this.getUser()
@@ -21,7 +21,7 @@ class TokenService {
     return JSON.parse(localStorage.getItem('user'))
   }
   setUser(user) {
-    console.log('set User..')
+    console.log('set User..' + JSON.stringify(user))
     localStorage.setItem('user', JSON.stringify(user))
   }
   removeUser() {

src/store/auth.store.js

@@ -1,3 +1,4 @@
+import api from '../interceptors/auth.api'
 import tokenService from '../service/token.service'
 //참조: https://yamoo9.github.io/axios/guide/interceptors.html
 
@@ -20,9 +21,6 @@ const getters = {
   }
 }
 const mutations = {
-  register: function (state, user) {
-    state.tokenService.setUser(user)
-  },
   login: function (state, user) {
     state.tokenService.setUser(user)
   },
@@ -34,11 +32,21 @@ const mutations = {
   }
 }
 const actions = {
-  register: function (context, user) {
+  register: async function (context, params) {
-    context.commit('register', user)
+    await api.post('/auth/register', params).then((response) => {
+      const { data } = response
+      if (data.access_token) {
+        context.commit('login', data)
+      }
+    })
   },
-  login: function (context, user) {
+  login: async function (context, params) {
-    context.commit('login', user)
+    await api.post('/auth/login', params).then((response) => {
+      const { data } = response
+      if (data.access_token) {
+        context.commit('login', data)
+      }
+    })
   },
   logout: function (context) {
     return context.commit('logout')

src/store/todo.store.js

@@ -1,28 +1,21 @@
+import api from '../interceptors/todo.api'
 const state = {
   total: 0,
-  rows: [],
+  rows: []
-  selected: []
-}
-const getters = {
-  getTotal: function (state) {
-    return state.total
-  },
-  getRows: function (state) {
-    return state.rows
-  }
 }
+const getters = {}
 const mutations = {
   setDatas: async function (state, datas) {
     state.total = datas.total
     state.rows = datas.rows
-  },
-  setSelected: function (state, datas) {
-    state.selected = datas
   }
 }
 const actions = {
-  setDatas: async function (context, datas) {
+  setDatas: async function (context, params) {
-    await context.commit('setDatas', datas)
+    await api.get('/todo', { params: params }).then((response) => {
+      const { data } = response
+      context.commit('setDatas', data)
+    })
   }
 }
 export default { namespaced: true, state, getters, mutations, actions }