Store_Vuex init...

package-lock.json

@@ -14,6 +14,7 @@
         "core-js": "^3.8.3",
         "vee-validate": "^3.4.14",
         "vue": "^2.6.14",
+        "vue-cookies": "^1.8.1",
         "vue-router": "^3.5.1",
         "vue2-editor": "^2.10.3",
         "vuex": "^3.6.2"
@@ -10643,6 +10644,11 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-cookies": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.1.tgz",
+      "integrity": "sha512-PDq1EaiRRyau5PBQVscXboHW+iWtcG4wRY2UKIz1j0nrjb3KESRU1PUyNUDdOajAwy4RH1IfiNR0suhWRXQdrA=="
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@@ -19485,6 +19491,11 @@
         "csstype": "^3.1.0"
       }
     },
+    "vue-cookies": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.1.tgz",
+      "integrity": "sha512-PDq1EaiRRyau5PBQVscXboHW+iWtcG4wRY2UKIz1j0nrjb3KESRU1PUyNUDdOajAwy4RH1IfiNR0suhWRXQdrA=="
+    },
     "vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "core-js": "^3.8.3",
     "vee-validate": "^3.4.14",
     "vue": "^2.6.14",
+    "vue-cookies": "^1.8.1",
     "vue-router": "^3.5.1",
     "vue2-editor": "^2.10.3",
     "vuex": "^3.6.2"

src/components/LoginComponent.vue

@@ -82,10 +82,10 @@ export default {
     async onSubmit() {
       try {
         //1.인증서버에서 인증코드받기
-        const accessToken = await this.getAccessToken()
+        const tokens = await this.getTokens()
         //2.인증코드를 받아오는데 성공하면 BackEnd서버로 인증코드를 보냄
-        //console.log(accessToken)
-        await this.sendAccessToken(accessToken)
+        //console.log(tokens)
+        await this.sendAccessToken(tokens)
         //3.next로 이동
         const return_url = this.$route.params.return_url || 'home'
         alert('로그인 성공..\n' + return_url)
@@ -96,7 +96,7 @@ export default {
         alert('로그인 실패...\n' + message)
       }
     },
-    async getAccessToken() {
+    async getTokens() {
       return await this.$store
         .dispatch('AuthStore/login', {
           email: this.form.email,
@@ -105,15 +105,15 @@ export default {
         .then((response) => {
           //console.log(response)
           //alert('인증서버에서 인증코드 받기 성공..')
-          return response.data.access_token
+          return response.data.tokens
         })
         .catch((e) => {
           throw new Error('인증서버에서 인증코드 받기 실패..\n' + e.message)
         })
     },
-    async sendAccessToken(accessToken) {
+    async sendTokens(tokens) {
       return await this.$store
-        .dispatch('TodoStore/sendAccessToken', accessToken)
+        .dispatch('TodoStore/sendTokens', tokens)
         .then((response) => {
           console.log(response)
           alert('인증코드 전송 성공..')

src/store/modules/auth.js

@@ -1,6 +1,5 @@
 import axios from 'axios'
 import jwt from './jwt'
-
 //참조: https://yamoo9.github.io/axios/guide/interceptors.html
 const apiServer = axios.create({
   baseURL: process.env.VUE_APP_AUTH_HOST,
@@ -13,19 +12,24 @@ apiServer.interceptors.request.use(
     Promise.reject(error)
   }
 )
+
 apiServer.defaults.headers.post['Content-Type'] =
   'application/x-www-form-urlencoded'
 
 // count state 속성 추가
 const state = {
-  token: {
-    accessToken: jwt.getToken()
+  tokens: {
+    access_token: jwt.getToken(),
+    refresh_token: jwt.getToken('refresh_token')
   }, // 토큰정보
   isAuthenticated: jwt.isAuthenticated()
 }
 const getters = {
   getAccessToken: function (state) {
-    return state.token.accessToken
+    return state.tokens.access_token
+  },
+  getRefreshToken: function (state) {
+    return state.tokens.refresh_token
   },
   isAuthenticated: function (state) {
     return state.isAuthenticated
@@ -33,65 +37,57 @@ const getters = {
 }
 const mutations = {
   login: function (state, payload = {}) {
-    state.token.accessToken = payload.accessToken
+    state.tokens = payload.tokens
     state.isAuthenticated = true
-    jwt.saveToken(payload.accessToken)
+    jwt.saveToken('acccess_token', payload.tokens.access_token)
+    jwt.saveToken('refresh_token', payload.tokens.refresh_token)
   },
   logout: function (state) {
-    state.token.accessToken = ''
+    state.tokens = {}
     state.isAuthenticated = false
     jwt.destroyToken()
   }
 }
 const actions = {
-  login: function (context, payload) {
-    let params = {
+  login: async function (context, payload) {
+    const params = {
       email: payload.email,
       password: payload.password
     }
-    return new Promise((resolve, reject) => {
-      apiServer
-        .post('/auth/login', params)
-        .then((response) => {
-          const { data } = response
-          context.commit('login', {
-            accessToken: data.accessToken
-          })
-          resolve(response)
+    return await apiServer
+      .post('/auth/login', params)
+      .then((response) => {
+        const { data } = response
+        context.commit('login', {
+          tokens: data.tokens
         })
-        .catch((error) => {
-          reject(error)
-        })
-    })
+        return response
+      })
+      .catch((error) => {
+        return error
+      })
   },
-  logout: function (context, payload) {
-    return new Promise((resolve) => {
-      setTimeout(function () {
-        context.commit('logout', payload)
-        resolve({})
-      }, 1000)
-    })
+  logout: async function (context, payload) {
+    return await context.commit('logout', payload)
   },
-  register: function (context, payload) {
-    let params = {
+  register: async function (context, payload) {
+    const params = {
       email: payload.email,
       password: payload.password,
       name: payload.name
     }
-    return new Promise((resolve, reject) => {
-      apiServer
-        .post('/auth/register', params)
-        .then((response) => {
-          const { data } = response
-          context.commit('login', {
-            accessToken: data.accessToken
-          })
-          resolve(response)
+    return await apiServer
+      .post('/auth/register', params)
+      .then((response) => {
+        const { data } = response
+        context.commit('login', {
+          tokens: data.tokens
         })
-        .catch((error) => {
-          reject(error)
-        })
-    })
+        return response
+      })
+      .catch((error) => {
+        return error
+      })
   }
 }
 export default { namespaced: true, state, getters, mutations, actions }

src/store/modules/jwt.js

@@ -1,22 +1,27 @@
-const Payload_KEY_NAME = 'access_token'
-const getToken = () => {
-  document.cookie.g
-  return window.localStorage.getItem(Payload_KEY_NAME)
+//import VueCookies from 'vue-cookies'
+//import jsonwebtoken from 'jsonwebtoken'
+
+const getToken = (key = 'access_token') => {
+  return window.localStorage.getItem(key)
+  //return VueCookies.get(Payload_KEY_NAME)
 }
-const saveToken = (token) => {
-  window.localStorage.setItem(Payload_KEY_NAME, token)
+const saveToken = (key, value) => {
+  window.localStorage.setItem(key, value)
 }
-const destroyToken = () => {
-  window.localStorage.removeItem(Payload_KEY_NAME)
+const destroyToken = (key) => {
+  window.localStorage.removeItem(key)
 }
+// const decodeToken = (key) => {
+//   return jsonwebtoken.decode(getToken(key))
+// }
 const isAuthenticated = () => {
   return !!getToken()
 }
-
 const getAuthorizationHeader = (config) => {
   //로그인이 되었는지 확인후 Request시 헤더에 로그인정보 추가하기 위함
   if (isAuthenticated) {
-    config.headers.common['Authorization'] = getToken()
+    config.headers.common['access_token'] = getToken('access_token')
+    config.headers.common['refresh_token'] = getToken('refresh_token')
   }
   return config
 }

src/store/modules/todo.js

@@ -36,36 +36,32 @@ const mutations = {
   }
 }
 const actions = {
-  sendAccessToken: function (context, accessToken) {
+  sendAccessToken: async function (context, accessToken) {
     //주의 .get의 parameter는 { params: params} 처럼 보내야함
-    return new Promise((resolve, reject) => {
-      apiServer
-        .get('/todo/accessToken', { params: accessToken })
-        .then((response) => {
-          const { data } = response
-          context.commit('setData', data)
-          resolve(response)
-        })
-        .catch((error) => {
-          reject(error)
-        })
-    })
+    return await apiServer
+      .get('/todo/accessToken', { params: accessToken })
+      .then((response) => {
+        const { data } = response
+        context.commit('setData', data)
+        return response
+      })
+      .catch((error) => {
+        return error
+      })
   },
-  setData: function (context, params) {
+  setData: async function (context, params) {
     console.log(params)
     //주의 .get의 parameter는 { params: params} 처럼 보내야함
-    return new Promise((resolve, reject) => {
-      apiServer
-        .get('/todo', { params: params })
-        .then((response) => {
-          const { data } = response
-          context.commit('setData', data)
-          resolve(response)
-        })
-        .catch((error) => {
-          reject(error)
-        })
-    })
+    return await apiServer
+      .get('/todo', { params: params })
+      .then((response) => {
+        const { data } = response
+        context.commit('setData', data)
+        return response
+      })
+      .catch((error) => {
+        return error
+      })
   }
 }
 export default { namespaced: true, state, getters, mutations, actions }