Store_Vuex init...

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
 }

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()
   }
 })

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 = {

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)
       })
   }
 }