diff --git a/package-lock.json b/package-lock.json index 036964a..5452ca7 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 65bc4ee..7f20fff 100644 --- a/package.json +++ b/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" diff --git a/src/components/LoginComponent.vue b/src/components/LoginComponent.vue index 9f52420..b3db2c5 100644 --- a/src/components/LoginComponent.vue +++ b/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('인증코드 전송 성공..') diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js index 84af741..3e7c839 100644 --- a/src/store/modules/auth.js +++ b/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 } diff --git a/src/store/modules/jwt.js b/src/store/modules/jwt.js index f4c7a20..23e7a15 100644 --- a/src/store/modules/jwt.js +++ b/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 } diff --git a/src/store/modules/todo.js b/src/store/modules/todo.js index 3b317fb..a1f68d1 100644 --- a/src/store/modules/todo.js +++ b/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 }