update

src/front/src/api/articleApi.js

@@ -1,7 +1,8 @@
 import axios from 'axios';
 import commonUtil from "../utils/commonUtil";
 
-function getArticles({page = 0, size = 10, q = ''}) {
+export default {
+  getArticles({page = 0, size = 10, q = ''}) {
 
     return axios({
       url: '/api/articles',
@@ -14,18 +15,16 @@ function getArticles({page = 0, size = 10, q = ''}) {
         q
       }
     });
-}
+  },
-
+  getArticle(id) {
-function getArticle(id) {
     return axios({
       url: '/api/articles/' + id,
       headers: {
         'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
       }
     });
-}
+  },
-
+  postArticle({title = '', content = ''}) {
-function postArticle({title = '', content = ''}) {
 
     return axios({
       url: '/api/articles',
@@ -38,9 +37,8 @@ function postArticle({title = '', content = ''}) {
         content
       }
     });
-}
+  },
-
+  updateArticle(id, {title = '', content = ''}) {
-function updateArticle(id, {title = '', content = ''}) {
     return axios({
       url: '/api/articles/' + id,
       method: 'put',
@@ -52,9 +50,8 @@ function updateArticle(id, {title = '', content = ''}) {
         content
       }
     });
-}
+  },
-
+  removeArticle(id) {
-function removeArticle(id) {
 
     return axios({
       url: '/api/articles/' + id,
@@ -63,12 +60,5 @@ function removeArticle(id) {
       },
       method: 'delete'
     });
-}
+  }
-
-export default {
-  getArticles,
-  getArticle,
-  postArticle,
-  updateArticle,
-  removeArticle
 }

src/front/src/api/authApi.js

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

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> <br>
-       <router-link to="/auth/login">로그인</router-link>
+       <router-link to="/auth/register">회원가입</router-link> <br>
-       <router-link to="/auth/register">회원가입</router-link>
-       <router-link to="/articles">게시글</router-link>
    </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,6 +23,15 @@
                 password: ''
             }
         },
+      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();