Store_Vuex init...

src/common/jwt.js

@@ -1,29 +0,0 @@
-import VueCookies from 'vue-cookies'
-
-const getToken = (key) => {
-  return VueCookies.get(key)
-  //return window.localStorage.getItem(key)
-}
-const saveToken = (key, token, expireIn) => {
-  VueCookies.set(key, token, expireIn)
-  //window.localStorage.setItem(key, token)
-}
-const destroyToken = (key) => {
-  VueCookies.remove(key)
-  //window.localStorage.removeItem(key)
-}
-const getAuthorizationHeader = (config) => {
-  //로그인이 되었는지 확인후 Request시 헤더에 로그인정보 추가하기 위함
-  if (getToken('access_token')) {
-    config.headers.common['Authorization'] =
-      'Bearer ' + getToken('access_token')
-  }
-  return config
-}
-
-export default {
-  getToken,
-  saveToken,
-  destroyToken,
-  getAuthorizationHeader
-}

src/components/LoginComponent.vue

@@ -49,6 +49,7 @@
 
 <script>
 // 참고 : https://kdydesign.github.io/2019/04/06/vuejs-vuex-helper/
+import authService from '../service/api/authApi'
 export default {
   data() {
     //console.log(this.$route)
@@ -81,8 +82,8 @@ export default {
     },
     async onSubmit() {
       //인증서버에서 인증코드받기
-      await this.$store
+      authService
-        .dispatch('AuthStore/login', {
+        .post('/auth/login', {
           email: this.form.email,
           password: this.form.password
         })

src/main.js

@@ -2,7 +2,13 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+//Bootstrap관련
 import { BootstrapVue } from 'bootstrap-vue'
+// Import Bootstrap and BootstrapVue CSS files (order is important)
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+//Validate관련
 import {
   ValidationObserver,
   ValidationProvider,
@@ -12,20 +18,15 @@ import {
 import ko from 'vee-validate/dist/locale/ko.json'
 import * as rules from 'vee-validate/dist/rules'
 
-// Import Bootstrap and BootstrapVue CSS files (order is important)
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-
 // Install VeeValidate rules and localization
 Object.keys(rules).forEach((rule) => {
   extend(rule, rules[rule])
 })
-
 localize('ko', ko)
-
 // Install VeeValidate components globally
 Vue.component('ValidationObserver', ValidationObserver)
 Vue.component('ValidationProvider', ValidationProvider)
+
 Vue.config.productionTip = false
 Vue.use(BootstrapVue)
 new Vue({

src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import jwt from '../common/jwt'
+import jwt from '../service/jwt'
 Vue.use(VueRouter)
 
 const routes = [

src/service/authService.js

@@ -0,0 +1,7 @@
+import axios from 'axios'
+const instance = axios.create({
+  baseURL: process.env.VUE_APP_AUTH_HOST,
+  headers: { 'Content-type': 'application/json' }
+})
+
+export default instance

src/service/jwt.js

@@ -0,0 +1,43 @@
+import VueCookies from 'vue-cookies'
+
+const getAccessToken = () => {
+  return VueCookies.get('access_token')
+  //return window.localStorage.getItem(key)
+}
+const getRefreshToken = () => {
+  return VueCookies.get('refresh_token')
+  //return window.localStorage.getItem(key)
+}
+const saveAccessToken = (access_token) => {
+  VueCookies.set('access_token', access_token.token, access_token.expireIn)
+  //window.localStorage.setItem(key, token)
+}
+const saveRefreshToken = (refresh_token) => {
+  VueCookies.set('refresh_token', refresh_token.token, refresh_token.expireIn)
+  //window.localStorage.setItem(key, token)
+}
+const destroyToken = () => {
+  VueCookies.remove('access_token')
+  VueCookies.remove('refresh_token')
+  //window.localStorage.removeItem(key)
+}
+
+const getAuthorizationHeader = (config) => {
+  //Request시 헤더에 로그인정보 추가하기 위함
+  if (getAccessToken()) {
+    //For Backend
+    config.headers.common['Authorization'] = 'Bearer ' + getAccessToken()
+    // for Node.js Express back-end
+    // config.headers["x-access-token"] = getAccessToken();
+  }
+  return config
+}
+
+export default {
+  getAccessToken,
+  getRefreshToken,
+  saveAccessToken,
+  saveRefreshToken,
+  destroyToken,
+  getAuthorizationHeader
+}

src/store/authIterceptors.js

@@ -0,0 +1,46 @@
+import authService from '../service/authService'
+import jwt from '../service/jwt'
+//참조: https://www.bezkoder.com/vue-refresh-token/
+const setup = (store) => {
+  //API Request 전 처리용
+  authService.defaults.headers.post['Content-Type'] =
+    'application/x-www-form-urlencoded'
+  //Request 처리용
+  authService.interceptors.request.use(
+    (config) => jwt.getAuthorizationHeader(config),
+    (error) => {
+      // Do something with request error
+      Promise.reject(error)
+    }
+  )
+  //Response 처리용
+  authService.interceptors.response.use(
+    (res) => {
+      console.log('AuthService Call 성공=>' + res)
+      return res
+    },
+    async (err) => {
+      // Do something with response error
+      const originalConfig = err.config
+      if (originalConfig.url !== '/auth/login' && err.response) {
+        // Access Token이 expired,오류로 인한 response 401 답볍을 받은경우
+        if (err.response.status === 401 && !originalConfig._retry) {
+          originalConfig._retry = true
+          try {
+            //Refresh Token으로 다시 Access Token 재생성 후 로그인 다시하라고 오류보냄
+            const rs = await authService.post('/auth/reload', {
+              refresh_token: jwt.getRefreshToken()
+            })
+            const { access_token } = rs.data
+            store.dispatch('auth/reload', access_token)
+            return authService(originalConfig)
+          } catch (_error) {
+            return Promise.reject(_error)
+          }
+        } //401처리
+      }
+      Promise.reject(err.response.data.message)
+    }
+  )
+}
+export default { setup }

src/store/authStore.js

@@ -0,0 +1,51 @@
+import jwt from '../../common/jwt'
+//참조: https://yamoo9.github.io/axios/guide/interceptors.html
+
+// count state 속성 추가
+const state = {
+  takens: {}
+}
+const getters = {
+  getTokens: function (state) {
+    return state.takens
+  },
+  isAuthenticated: function () {
+    console.log('isAuthenticated:' + jwt.getAccessToken())
+    return !!jwt.getAccessToken()
+  }
+}
+const mutations = {
+  register: function (state, tokens) {
+    state.takens = tokens
+    jwt.saveAccessToken(tokens.access_token)
+    jwt.saveRefreshToken(tokens.refresh_token)
+  },
+  login: function (state, tokens) {
+    state.takens = tokens
+    jwt.saveAccessToken(tokens.access_token)
+    jwt.saveRefreshToken(tokens.refresh_token)
+  },
+  logout: function (state) {
+    state.takens = {}
+    jwt.destroyToken()
+  },
+  reload: function (state, access_token) {
+    state.takens.access_token = access_token
+    jwt.saveAccessToken(access_token)
+  }
+}
+const actions = {
+  register: async function (context, tokens) {
+    context.commit('register', tokens)
+  },
+  login: async function (context, tokens) {
+    context.commit('login', tokens)
+  },
+  logout: async function (context) {
+    return await context.commit('logout')
+  },
+  reload: async function (context, access_token) {
+    return await context.commit('reload', access_token)
+  }
+}
+export default { namespaced: true, state, getters, mutations, actions }

src/store/index.js

@@ -1,9 +1,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import AuthStore from './modules/auth'
+import AuthStore from './authStore'
-import TodoStore from './modules/todo'
+import AuthInterceptors from './authIterceptors'
+import TodoStore from './todoStore'
 
 Vue.use(Vuex)
+AuthInterceptors(AuthStore)
 
 export default new Vuex.Store({
   modules: {

src/store/modules/auth.js

@@ -1,92 +0,0 @@
-import axios from 'axios'
-import jwt from '../../common/jwt'
-//참조: https://yamoo9.github.io/axios/guide/interceptors.html
-
-const apiServer = axios.create({
-  baseURL: process.env.VUE_APP_AUTH_HOST,
-  headers: { 'content-type': 'application/json' }
-})
-apiServer.interceptors.request.use(
-  (config) => jwt.getAuthorizationHeader(config),
-  (error) => {
-    // Do something with request error
-    Promise.reject(error)
-  }
-)
-apiServer.defaults.headers.post['Content-Type'] =
-  'application/x-www-form-urlencoded'
-
-// count state 속성 추가
-const state = {
-  takens: {}
-}
-const getters = {
-  getTokens: function (state) {
-    return state.takens
-  },
-  isAuthenticated: function () {
-    console.log('isAuthenticated:' + jwt.getToken('access_token'))
-    return !!jwt.getToken('access_token')
-  }
-}
-const mutations = {
-  login: function (state, tokens = {}) {
-    state.takens = tokens
-    console.log(tokens)
-    jwt.saveToken(
-      'access_token',
-      tokens.access_token.token,
-      tokens.access_token.expiresIn
-    )
-    jwt.saveToken(
-      'refresh_token',
-      tokens.refresh_token.token,
-      tokens.refresh_token.expiresIn
-    )
-  },
-  logout: function (state) {
-    state.takens = {}
-    jwt.destroyToken('access_token')
-    jwt.destroyToken('refresh_token')
-  }
-}
-const actions = {
-  login: async function (context, payload) {
-    const params = {
-      email: payload.email,
-      password: payload.password
-    }
-    return await apiServer
-      .post('/auth/login', params)
-      .then((response) => {
-        console.log(response)
-        const { data } = response
-        context.commit('login', data)
-        return response
-      })
-      .catch((e) => {
-        throw new Error('login 오류\n' + e.response.data.message)
-      })
-  },
-  logout: async function (context) {
-    return await context.commit('logout')
-  },
-  register: async function (context, payload) {
-    const params = {
-      email: payload.email,
-      password: payload.password,
-      name: payload.name
-    }
-    return await apiServer
-      .post('/auth/register', params)
-      .then((response) => {
-        const { data } = response
-        context.commit('login', data.tokens)
-        return response
-      })
-      .catch((e) => {
-        throw new Error('register 오류\n' + +e.response.data.message)
-      })
-  }
-}
-export default { namespaced: true, state, getters, mutations, actions }

src/store/todoStore.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import jwt from '../../common/jwt'
+import jwt from '../service/jwt'
 
 //참조: https://yamoo9.github.io/axios/guide/interceptors.html
 const apiServer = axios.create({