front update

src/front/src/api/articleApi.js

@@ -2,13 +2,6 @@ import axios from 'axios';
 import commonUtil from "../utils/commonUtil";
 
 export default {
-  bind(context) {
-    this.getArticle = this.getArticle.bind(context);
-    this.getArticles = this.getArticles.bind(context);
-    this.postArticle = this.postArticle.bind(context);
-    this.updateArticle = this.updateArticle.bind(context);
-    this.removeArticle = this.removeArticle.bind(context);
-  },
   getArticles({page = 0, size = 10, q = ''}) {
 
     return axios({

src/front/src/api/authApi.js

@@ -1,13 +1,8 @@
 import axios from "axios";
+import commonUtil from "../utils/commonUtil";
 
 
 export default {
-  bind(context) {
-    this.login = this.login.bind(context);
-    this.session = this.session.bind(context);
-    this.register = this.register.bind(context);
-    this.logout = this.logout.bind(context);
-  },
   login(data) {
     const { email, password } = data;
     return axios({
@@ -24,7 +19,7 @@ export default {
       method: 'get',
       url: '/api/users',
       headers: {
-        'Authorization': 'Bearer ' + this.$cookie.get('accessToken')
+        'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
       }
     });
   },

src/front/src/middlewares/authentication.js

@@ -1,16 +1,20 @@
 import axios from "axios";
+import commonUtil from "../utils/commonUtil";
 
 export default {
-  bind(context) {
-    this.session = this.session.bind(context);
-  },
   async session() {
-    await axios({
-      method: 'get',
-      url: '/api/users',
-      headers: {
-        'Authorization': 'Bearer ' + this.$cookie.get('accessToken')
-      }
-    });
+    try {
+      await axios({
+        method: 'get',
+        url: '/api/users',
+        headers: {
+          'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
+        }
+      });
+    } catch (e) {
+      alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
+      await this.$router.replace('/');
+    }
+
   }
 }

src/front/src/pages/Welcome.vue

@@ -11,8 +11,9 @@
     export default {
         name: "Welcome",
       async beforeCreate() {
-          authApi.bind(this);
-
+          authApi.session = authApi.session.bind(this);
+      },
+      async created() {
         try {
           await authApi.session();
           await this.$router.replace('/articles');

src/front/src/pages/articles/Detail.vue

@@ -30,8 +30,10 @@
       }
     },
     async beforeCreate() {
-      articleApi.bind(this);
-
+      articleApi.getArticle = articleApi.getArticle.bind(this);
+      articleApi.removeArticle = articleApi.removeArticle.bind(this);
+    },
+    async created() {
       try {
         const articleId = this.$route.params.id;
         const result = await articleApi.getArticle(articleId);
@@ -41,6 +43,7 @@
       } catch (e) {
         console.log(e);
       }
+
     },
     methods: {
       async remove() {

src/front/src/pages/articles/List.vue

@@ -27,6 +27,7 @@
     import articleApi from "../../api/articleApi";
     import authentication from "../../middlewares/authentication";
     import authApi from "../../api/authApi";
+    import commonUtil from "../../utils/commonUtil";
 
     export default {
         name: "List",
@@ -37,28 +38,30 @@
           }
         },
         async beforeCreate() {
-          authentication.bind(this);
-          articleApi.bind(this);
-          authApi.bind(this);
+          authentication.session = authentication.session.bind(this);
+          articleApi.getArticles = articleApi.getArticles.bind(this);
+          authApi.logout = authApi.logout.bind(this);
 
-          try {
-            await authentication.session();
-          } catch (e) {
-            alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
-            await this.$router.replace('/');
-            return;
-          }
-
-          try {
-            const result = await articleApi.getArticles({});
-            this.articles = result.data;
-            this.pending = false;
-          } catch (err) {
-            alert('문제가 발생하였습니다.');
-            console.log(err.response);
-          }
         },
-        methods: {
+      async created() {
+        try {
+          await authentication.session();
+        } catch (e) {
+          alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
+          await this.$router.replace('/');
+          return;
+        }
+
+        try {
+          const result = await articleApi.getArticles({});
+          this.articles = result.data;
+          this.pending = false;
+        } catch (err) {
+          alert('문제가 발생하였습니다.');
+          console.log(err.response);
+        }
+      },
+      methods: {
           async logout() {
             if (!confirm('정말 로그아웃 하시겠습니까?')) return;
 

src/front/src/pages/articles/Write.vue

@@ -30,16 +30,13 @@
       }
     },
     async beforeCreate() {
-      authentication.bind(this);
-      articleApi.bind(this);
-
-      try {
-        await authentication.session();
-      } catch (err) {
-        alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
-        await this.$router.replace('/');
-        return;
-      }
+      authentication.session = authentication.session.bind(this);
+      articleApi.getArticle = articleApi.getArticle.bind(this);
+      articleApi.postArticle = articleApi.postArticle.bind(this);
+      articleApi.updateArticle = articleApi.updateArticle.bind(this);
+    },
+    async created() {
+      await authentication.session();
 
       const id = this.$route.query.id;
 

src/front/src/pages/auth/Login.vue

@@ -1,14 +1,11 @@
 <template>
     <div>
         <router-link to="/">home</router-link>
-
         <form @submit="submit">
             <input type="email" v-model="email">
             <input type="password" v-model="password">
             <button type="submit">확인</button>
         </form>
-
-        <button type="button" @click="session">세션확인</button>
     </div>
 </template>
 
@@ -23,17 +20,16 @@
                 password: ''
             }
         },
-      async beforeCreate() {
-          authApi.bind(this);
-
-
-
-          try {
-            await authApi.session();
-            await this.$router.replace('/articles');
-          } catch (e) {
-            console.log(e);
-          }
+      beforeCreate() {
+        authApi.session = authApi.session.bind(this);
+      },
+      async created() {
+        try {
+          await authApi.session();
+          await this.$router.replace('/articles');
+        } catch (e) {
+          console.log(e);
+        }
       },
       methods: {
             submit: async function(evt) {
@@ -50,14 +46,6 @@
                 }
 
             },
-            session: async function(evt) {
-                try {
-                    const result = await authApi.session();
-                    console.log(result);
-                } catch (err) {
-                    console.log(err);
-                }
-            }
         }
     }
 </script>

src/front/src/pages/auth/Register.vue

@@ -20,7 +20,19 @@
               password: ''
             }
         },
-        methods: {
+      beforeCreate() {
+          authApi.register = authApi.register.bind(this);
+          authApi.session = authApi.session.bind(this);
+      },
+      async created() {
+        try {
+          await authApi.session();
+          await this.$router.replace("/articles");
+        } catch (err) {
+          console.log(err);
+        }
+      },
+      methods: {
             register: async function(evt) {
                 evt.preventDefault();
                 const { email, name, password } = this;

src/front/src/utils/commonUtil.js

@@ -1,7 +1,6 @@
-function getAuthenticationHeaderBearer() {
-  return 'Bearer ' + this.$cookie.get('accessToken');
-}
 
 export default {
-  getAuthenticationHeaderBearer
-}
+  getAuthenticationHeaderBearer() {
+    return 'Bearer ' + this.$cookie.get('accessToken');
+  }
+};