From 404f44cf85f790f056491724a96e495ae985399a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=EC=A4=80=ED=9D=A0?= Date: Mon, 12 Sep 2022 19:28:58 +0900 Subject: [PATCH] Store_Vuex init... --- src/common/jwt.js | 25 ++++++++++--------------- src/router/index.js | 24 ++++++++++++++---------- src/store/modules/auth.js | 33 +++++++++++++-------------------- src/store/modules/todo.js | 5 +++-- 4 files changed, 40 insertions(+), 47 deletions(-) diff --git a/src/common/jwt.js b/src/common/jwt.js index b3ca1b6..191e30b 100644 --- a/src/common/jwt.js +++ b/src/common/jwt.js @@ -1,35 +1,30 @@ //import VueCookies from 'vue-cookies' //import jsonwebtoken from 'jsonwebtoken' -const getToken = (key = 'access_token') => { +const getToken = (key) => { + //return VueCookies.get(key) return window.localStorage.getItem(key) - //return VueCookies.get(Payload_KEY_NAME) } -const saveToken = (key, value) => { - window.localStorage.setItem(key, value) +const saveToken = (key, token) => { + //VueCookies.set(key, token, expireIn) + window.localStorage.setItem(key, token) } const destroyToken = (key) => { + //VueCookies.remove(key) window.localStorage.removeItem(key) } -// const decodeToken = (key) => { -// return jsonwebtoken.decode(getToken(key)) -// } -const isAuthenticated = () => { - console.log('isAuthenticated' + getToken()) - return !!getToken() -} const getAuthorizationHeader = (config) => { //로그인이 되었는지 확인후 Request시 헤더에 로그인정보 추가하기 위함 - if (isAuthenticated) { - config.headers.common['access_token'] = getToken('access_token') - config.headers.common['refresh_token'] = getToken('refresh_token') + if (getToken('access_token')) { + config.headers.common['Authorization'] = + 'Bearer ' + getToken('access_token') } return config } + export default { getToken, saveToken, destroyToken, - isAuthenticated, getAuthorizationHeader } diff --git a/src/router/index.js b/src/router/index.js index e2a376e..8947586 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,7 +1,7 @@ import Vue from 'vue' import VueRouter from 'vue-router' import HomeView from '../views/HomeView.vue' -import store from '../store' +import jwt from '../common/jwt' Vue.use(VueRouter) const routes = [ @@ -61,19 +61,23 @@ const router = new VueRouter({ router.beforeEach((to, from, next) => { //1. routes 설정에서 meta: { requiredAuth: true } 가 선언된 경우 if (to.matched.some((route) => route.meta.requiredAuth)) { - //2. 로그인 인증 않된 경우 - //console.log(store.getters) - console.log('Router 인증확인:' + store.getters['AuthStore/isAuthenticated']) - if (!store.getters['AuthStore/isAuthenticated']) { - console.log(from.name + ' => 3. To[' + to.name + '] => 로그인') - next({ name: 'login', params: { return_url: to.name } }) - } else { - //3. 로그인 인증완료 + //2. 로그인 체크용 + const access_token = jwt.getToken('access_token') + const refresh_token = jwt.getToken('refresh_token') + if (access_token === null && refresh_token !== null) { + //refreshToken은 있고 accessToken이 없을 경우 토큰 재발급 요청 + this.$store.dispatch('refreshToken') + } else if (access_token) { console.log(from.name + ' => 2. 이미인증완료 => ' + to.name) + //accessToken이 있을 경우 진행 next() + } else { + //2개 토큰이 모두 없을 경우 로그인페이지로 + console.log(from.name + ' => 로그인페이지 => ' + to.name) + next({ name: 'login', params: { return_url: to.name } }) } } else { - console.log(from.name + ' => 1. 인증요구 없음 => ' + to.name) + console.log(from.name + ' => 기본통과 => ' + to.name) next() } }) diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js index a1816e0..2724ebd 100644 --- a/src/store/modules/auth.js +++ b/src/store/modules/auth.js @@ -1,6 +1,7 @@ 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' } @@ -12,38 +13,32 @@ apiServer.interceptors.request.use( Promise.reject(error) } ) - apiServer.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // count state 속성 추가 const state = { - tokens: { - access_token: jwt.getToken(), - refresh_token: jwt.getToken('refresh_token') - }, // 토큰정보 - isAuthenticated: jwt.isAuthenticated() + takens: {} } const getters = { - getAccessToken: function (state) { - return state.tokens.access_token + getTokens: function (state) { + return state.takens }, - getRefreshToken: function (state) { - return state.tokens.refresh_token - }, - isAuthenticated: function (state) { - return state.isAuthenticated + isAuthenticated: function () { + console.log('isAuthenticated:' + jwt.getToken('access_token')) + return !!jwt.getToken('access_token') } } const mutations = { login: function (state, payload = {}) { - state.tokens = payload.tokens + state.takens = payload.tokens jwt.saveToken('access_token', payload.tokens.access_token) jwt.saveToken('refresh_token', payload.tokens.refresh_token) }, logout: function (state) { - state.tokens = {} - jwt.destroyToken() + state.takens = {} + jwt.destroyTokens('access_token') + jwt.destroyTokens('refresh_token') } } const actions = { @@ -64,10 +59,8 @@ const actions = { throw new Error('login 오류\n' + e.response.data.message) }) }, - logout: async function (context, payload) { - return await context.commit('logout', payload).catch((e) => { - throw new Error('logout 오류\n' + +e.response.data.message) - }) + logout: async function (context) { + return await context.commit('logout') }, register: async function (context, payload) { const params = { diff --git a/src/store/modules/todo.js b/src/store/modules/todo.js index 933f94b..17c4a8a 100644 --- a/src/store/modules/todo.js +++ b/src/store/modules/todo.js @@ -42,12 +42,13 @@ const actions = { return await apiServer .get('/todo', { params: params }) .then((response) => { + console.log(response) const { data } = response - console.log(data) context.commit('setDatas', data) }) .catch((e) => { - throw new Error('todo List 오류\n' + +e.response.data.message) + //throw new Error('todo List 오류\n' + e.response.data.message) + console.log(e) }) } }