vue2_frontend...

src/components/LoginComponent.vue

@@ -13,7 +13,7 @@
             <b-form-input
               :name="field.email.key"
               :type="field.email.type"
-              v-model="form.email"
+              v-model="email"
               :state="getValidationState(validationContext)"
               :placeholder="field.email.placeholder"
             ></b-form-input>
@@ -32,7 +32,7 @@
             <b-form-input
               :name="field.password.key"
               :type="field.password.type"
-              v-model="form.password"
+              v-model="password"
               :state="getValidationState(validationContext)"
               :placeholder="field.password.placeholder"
             ></b-form-input>
@@ -49,29 +49,25 @@
 
 <script>
 // 참고 : https://kdydesign.github.io/2019/04/06/vuejs-vuex-helper/
+import { createNamespacedHelpers } from 'vuex'
+const authStore = createNamespacedHelpers('AuthStore')
 export default {
-  data() {
+  computed: {
-    //console.log(this.$route)
+    ...authStore.mapState(['field']),
-    return {
+    email: {
-      form: {
+      get() {
-        email: null,
+        return this.$store.state.AuthStore.form.email
-        password: null
       },
-      field: {
+      set(value) {
-        email: {
+        this.$store.commit('AuthStore/email', value)
-          key: 'email',
+      }
-          type: 'email',
+    },
-          label: '로그인 메일',
+    password: {
-          placeholder: 'sample@test.com',
+      get() {
-          rules: { required: true, email: true }
+        return this.$store.state.AuthStore.form.password
-        },
+      },
-        password: {
+      set(value) {
-          key: 'password',
+        this.$store.commit('AuthStore/password', value)
-          type: 'password',
-          label: '로그인 암호',
-          placeholder: 'password',
-          rules: { required: true, min: 4, max: 20 }
-        }
       }
     }
   },
@@ -81,13 +77,13 @@ export default {
     },
     async onSubmit() {
       try {
-        const params = { email: this.form.email, password: this.form.password }
+        //console.log(authStore)
-        await this.$store.dispatch('AuthStore/login', params)
+        await this.$store.dispatch('AuthStore/login')
         await this.$router.push({
           name: this.$route.params.return_url || 'home'
         })
       } catch (e) {
-        alert(e.response.data.message)
+        alert(e.message)
       }
     }
   }

src/components/todo/InputComponent.vue

@@ -55,7 +55,7 @@ import axios from 'axios'
 //import { VueEditor } from 'vue2-editor/dist/vue2-editor.core.js'
 export default {
   components: {},
-  data() {
+  data: () => {
     return {
       form: {
         title: null,

src/components/todo/ListComponent.vue

@@ -141,66 +141,10 @@ const todoStore = createNamespacedHelpers('TodoStore')
 export default {
   components: {},
   computed: {
-    ...todoStore.mapState(['total', 'rows'])
+    ...todoStore.mapState(['total', 'rows', 'fields'])
   },
-  created: function () {
+  data: () => {
-    this.setDatas()
-  },
-  data: function () {
     return {
-      fields: [
-        {
-          key: 'rowSelect',
-          label: '✓',
-          thStyle: { width: '55px', backgroundColor: 'yellow' }
-        },
-        {
-          key: 'id',
-          label: '번호',
-          thStyle: { width: '75px' },
-          variant: 'primary',
-          sortable: true
-        },
-        {
-          key: 'title',
-          label: '제목',
-          sortable: true
-        },
-        {
-          key: 'content',
-          label: '내용',
-          sortable: true
-        },
-        {
-          key: 'is_done',
-          label: '사용여부',
-          thStyle: { width: '105px' },
-          formatter: (value) => {
-            return value == true ? 'YES' : 'NO'
-          },
-          Options: [
-            { text: '사용여부 선택', value: '' },
-            { text: 'YES', value: true },
-            { text: 'NO', value: false }
-          ],
-          sortable: true,
-          sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
-        },
-        // { key: 'updateAt', label: '수정일' },
-        {
-          key: 'createdAt',
-          label: '등록일',
-          thStyle: { width: '125px' },
-          formatter: (value) => {
-            return value.replace(
-              /([0-9]{4})-([0-9]{2})-([0-9]{2}).*/gi,
-              '$1-$2-$3'
-            )
-          },
-          sortable: true,
-          sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
-        }
-      ],
       page: 1, // 현재 페이지
       perPage: process.env.VUE_APP_TABLE_DEFAULT_PERPAGE, // 페이지당 보여줄 갯수
       perPageOptions: [

src/interceptors/interceptor.js

@@ -10,7 +10,7 @@ const interceptor = (instance) => {
   //Request 처리용
   instance.interceptors.request.use(
     (config) => {
-      const token = tokenService.getLocalAccessToken()
+      const token = tokenService.getAccessToken()
       if (token) {
         config.headers['Authorization'] = 'Bearer ' + token // for Spring Boot back-end
         config.headers['x-access-token'] = token // for Node.js Express back-end
@@ -27,12 +27,10 @@ const interceptor = (instance) => {
   instance.interceptors.response.use(
     (response) => {
       console.log('interceptor 성공')
-      //console.log(response)
       return response
     },
     async (err) => {
       console.log('interceptor 실패')
-      //console.log(err)
       //err.config->이전에 보냈던 api (url등)정보 전달용
       //err.response->오류 상태를 알기 위해
       //originalConfig._retry는 처음 시도용인지 알기 위해
@@ -42,7 +40,7 @@ const interceptor = (instance) => {
           return await reloadAccessToken(originalConfig)
         }
       }
-      return Promise.reject(err)
+      return Promise.reject(err.response.data)
     }
   )
 
@@ -54,11 +52,11 @@ const interceptor = (instance) => {
       //Refresh Token으로 다시 Access Token 재생성 후 로그인 다시하라고 오류보냄
       await authApi
         .post('/auth/reload', {
-          refresh_token: tokenService.getLocalRefreshToken()
+          refresh_token: tokenService.getRefreshToken()
         })
         .then((rs) => {
           const { access_token } = rs.data
-          tokenService.updateLocalAccessToken(access_token)
+          tokenService.updateAccessToken(access_token)
         })
       //Refresh Token도 expire되었으면 Login 처리
 

src/store/auth.store.js

@@ -4,7 +4,28 @@ import tokenService from '../service/token.service'
 
 // count state 속성 추가
 const state = {
-  tokenService: tokenService
+  tokenService: tokenService,
+  form: {
+    email: null,
+    password: null,
+    name: null
+  },
+  field: {
+    email: {
+      key: 'email',
+      type: 'email',
+      label: '로그인 메일',
+      placeholder: 'sample@test.com',
+      rules: { required: true, email: true }
+    },
+    password: {
+      key: 'password',
+      type: 'password',
+      label: '로그인 암호',
+      placeholder: 'password',
+      rules: { required: true, min: 4, max: 20 }
+    }
+  }
 }
 const getters = {
   isAuthenticated: function (state) {
@@ -21,6 +42,15 @@ const getters = {
   }
 }
 const mutations = {
+  email: function (state, email) {
+    state.form.email = email
+  },
+  password: function (state, password) {
+    state.form.password = password
+  },
+  name: function (state, name) {
+    state.form.name = name
+  },
   login: function (state, user) {
     state.tokenService.setUser(user)
   },
@@ -32,27 +62,34 @@ const mutations = {
   }
 }
 const actions = {
-  register: async function (context, params) {
+  register: async function (commit) {
+    const params = {
+      email: this.form.email,
+      password: this.form.password,
+      name: this.form.name
+    }
     await api.post('/auth/register', params).then((response) => {
       const { data } = response
       if (data.access_token) {
-        context.commit('login', data)
+        commit('login', data)
       }
     })
   },
-  login: async function (context, params) {
+  login: async function ({ commit, state }) {
+    const params = { email: state.form.email, password: state.form.password }
+    console.log(params)
     await api.post('/auth/login', params).then((response) => {
       const { data } = response
       if (data.access_token) {
-        context.commit('login', data)
+        commit('login', data)
       }
     })
   },
-  logout: function (context) {
+  logout: function (commit) {
-    return context.commit('logout')
+    return commit('logout')
   },
-  reload: function (context, access_token) {
+  reload: function (commit, access_token) {
-    return context.commit('reload', access_token)
+    return commit('reload', access_token)
   }
 }
 export default { namespaced: true, state, getters, mutations, actions }

src/store/todo.store.js

@@ -1,7 +1,57 @@
 import api from '../interceptors/todo.api'
 const state = {
   total: 0,
-  rows: []
+  rows: [],
+  fields: [
+    {
+      key: 'rowSelect',
+      label: '✓',
+      thStyle: { width: '55px', backgroundColor: 'yellow' }
+    },
+    {
+      key: 'id',
+      label: '번호',
+      thStyle: { width: '75px' },
+      variant: 'primary',
+      sortable: true
+    },
+    {
+      key: 'title',
+      label: '제목',
+      sortable: true
+    },
+    {
+      key: 'content',
+      label: '내용',
+      sortable: true
+    },
+    {
+      key: 'is_done',
+      label: '사용여부',
+      thStyle: { width: '105px' },
+      formatter: (value) => {
+        return value == true ? 'YES' : 'NO'
+      },
+      Options: [
+        { text: '사용여부 선택', value: '' },
+        { text: 'YES', value: true },
+        { text: 'NO', value: false }
+      ],
+      sortable: true,
+      sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
+    },
+    // { key: 'updateAt', label: '수정일' },
+    {
+      key: 'createdAt',
+      label: '등록일',
+      thStyle: { width: '125px' },
+      formatter: (value) => {
+        return value.replace(/([0-9]{4})-([0-9]{2})-([0-9]{2}).*/gi, '$1-$2-$3')
+      },
+      sortable: true,
+      sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
+    }
+  ]
 }
 const getters = {}
 const mutations = {
@@ -11,10 +61,10 @@ const mutations = {
   }
 }
 const actions = {
-  setDatas: async function (context, params) {
+  setDatas: async function (commit, params) {
     await api.get('/todo', { params: params }).then((response) => {
       const { data } = response
-      context.commit('setDatas', data)
+      commit('setDatas', data)
     })
   }
 }