update

src/front/src/api/articleApi.js

@@ -1,74 +1,64 @@
 import axios from 'axios';
 import commonUtil from "../utils/commonUtil";
 
-function getArticles({page = 0, size = 10, q = ''}) {
-
-  return axios({
-    url: '/api/articles',
-    headers: {
-      'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
-    },
-    params: {
-      page,
-      size,
-      q
-    }
-  });
-}
-
-function getArticle(id) {
-  return axios({
-    url: '/api/articles/' + id,
-    headers: {
-      'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
-    }
-  });
-}
-
-function postArticle({title = '', content = ''}) {
-
-  return axios({
-    url: '/api/articles',
-    method: 'post',
-    headers: {
-      'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
-    },
-    data: {
-      title,
-      content
-    }
-  });
-}
-
-function updateArticle(id, {title = '', content = ''}) {
-  return axios({
-    url: '/api/articles/' + id,
-    method: 'put',
-    headers: {
-      'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
-    },
-    data: {
-      title,
-      content
-    }
-  });
-}
-
-function removeArticle(id) {
-
-  return axios({
-    url: '/api/articles/' + id,
-    headers: {
-      'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
-    },
-    method: 'delete'
-  });
-}
-
 export default {
-  getArticles,
-  getArticle,
-  postArticle,
-  updateArticle,
-  removeArticle
+  getArticles({page = 0, size = 10, q = ''}) {
+
+    return axios({
+      url: '/api/articles',
+      headers: {
+        'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
+      },
+      params: {
+        page,
+        size,
+        q
+      }
+    });
+  },
+  getArticle(id) {
+    return axios({
+      url: '/api/articles/' + id,
+      headers: {
+        'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
+      }
+    });
+  },
+  postArticle({title = '', content = ''}) {
+
+    return axios({
+      url: '/api/articles',
+      method: 'post',
+      headers: {
+        'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
+      },
+      data: {
+        title,
+        content
+      }
+    });
+  },
+  updateArticle(id, {title = '', content = ''}) {
+    return axios({
+      url: '/api/articles/' + id,
+      method: 'put',
+      headers: {
+        'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
+      },
+      data: {
+        title,
+        content
+      }
+    });
+  },
+  removeArticle(id) {
+
+    return axios({
+      url: '/api/articles/' + id,
+      headers: {
+        'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
+      },
+      method: 'delete'
+    });
+  }
 }

src/front/src/api/authApi.js

@@ -1,42 +1,40 @@
 import axios from "axios";
 
-function login(data) {
-  const { email, password } = data;
-  return axios({
-    method: 'post',
-    url: '/api/auth/login',
-    data: {
-      email,
-      password
-    }
-  });
-}
-
-function register(data) {
-  const { email, name, password } = data;
-  return axios({
-    method: 'post',
-    url: '/api/auth/register',
-    data: {
-      email,
-      name,
-      password
-    }
-  });
-}
-
-function session(token) {
-  return axios({
-    method: 'get',
-    url: '/api/users',
-    headers: {
-      'Authorization': 'Bearer ' + token
-    }
-  });
-}
 
 export default {
-  login,
-  session,
-  register
+  login(data) {
+    const { email, password } = data;
+    return axios({
+      method: 'post',
+      url: '/api/auth/login',
+      data: {
+        email,
+        password
+      }
+    });
+  },
+  session(token) {
+    return axios({
+      method: 'get',
+      url: '/api/users',
+      headers: {
+        'Authorization': 'Bearer ' + token
+      }
+    });
+  },
+  register(data) {
+    const { email, name, password } = data;
+    return axios({
+      method: 'post',
+      url: '/api/auth/register',
+      data: {
+        email,
+        name,
+        password
+      }
+    });
+  },
+  logout() {
+    this.$cookie.set('accessToken', null, 0);
+  }
 }

src/front/src/middlewares/authentication.js

@@ -8,5 +8,4 @@ export default async function () {
       'Authorization': 'Bearer ' + this.$cookie.get('accessToken')
     }
   });
-
 }

src/front/src/pages/Welcome.vue

@@ -1,15 +1,24 @@
 <template>
    <div>
-       home
-       <router-link to="/auth/login">로그인</router-link>
-       <router-link to="/auth/register">회원가입</router-link>
-       <router-link to="/articles">게시글</router-link>
+       <router-link to="/auth/login">로그인</router-link> <br>
+       <router-link to="/auth/register">회원가입</router-link> <br>
    </div>
 </template>
 
 <script>
+    import authApi from "../api/authApi";
+
     export default {
-        name: "Welcome"
+        name: "Welcome",
+      async beforeCreate() {
+        const accessToken = this.$cookie.get('accessToken');
+        try {
+          await authApi.session.bind(this)(accessToken);
+          await this.$router.replace('/articles');
+        } catch (e) {
+          console.log(e);
+        }
+      }
     }
 </script>
 

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

@@ -9,12 +9,17 @@
         <div>
             <router-link to="/articles/write">글쓰기</router-link>
         </div>
+
+        <div>
+            <button type="button" @click="logout">로그아웃</button>
+        </div>
     </div>
 </template>
 
 <script>
     import articleApi from "../../api/articleApi";
     import authentication from "../../middlewares/authentication";
+    import authApi from "../../api/authApi";
 
     export default {
         name: "List",
@@ -41,6 +46,19 @@
             alert('문제가 발생하였습니다.');
             console.log(err.response);
           }
+        },
+        methods: {
+          async logout() {
+            if (!confirm('정말 로그아웃 하시겠습니까?')) return;
+
+            try {
+              await authApi.logout.bind(this)();
+              await this.$router.push('/');
+            } catch (e) {
+                console.log(e);
+            }
+
+          }
         }
     }
 </script>

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

@@ -23,7 +23,16 @@
                 password: ''
             }
         },
-        methods: {
+      async beforeCreate() {
+          const accessToken = this.$cookie.get('accessToken');
+          try {
+            await authApi.session.bind(this)(accessToken);
+            await this.$router.replace('/articles');
+          } catch (e) {
+            console.log(e);
+          }
+      },
+      methods: {
             submit: async function(evt) {
                 evt.preventDefault();
                 const { email, password } = this;