글쓰기

src/front/src/api/articleApi.js

@@ -1,12 +1,12 @@
 import axios from 'axios';
+import commonUtil from "../utils/commonUtil";
 
 function getArticles({page = 0, size = 10, q = ''}) {
-  const accessToken = this.$cookie.get('accessToken');
 
   return axios({
     url: '/api/articles',
     headers: {
-      'Authorization': 'Bearer ' + accessToken,
+      'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
     },
     params: {
       page,
@@ -16,6 +16,22 @@ function getArticles({page = 0, size = 10, q = ''}) {
   });
 }
 
+function postArticle({title = '', content = ''}) {
+
+  return axios({
+    url: '/api/articles',
+    method: 'post',
+    headers: {
+      'Authorization': commonUtil.getAuthenticationHeaderBearer.bind(this)()
+    },
+    data: {
+      title,
+      content
+    }
+  });
+}
+
 export default {
-  getArticles
+  getArticles,
+  postArticle
 }

src/front/src/middlewares/authentication.js

@@ -1,16 +1,12 @@
 import axios from "axios";
 
 export default async function () {
-  try {
+  await axios({
-    const token = this.$cookie.get('accessToken');
+    method: 'get',
-    const result = await axios({
+    url: '/api/users',
-      method: 'get',
+    headers: {
-      url: '/api/users',
+      'Authorization': 'Bearer ' + this.$cookie.get('accessToken')
-      headers: {
+    }
-        'Authorization': 'Bearer ' + token
+  });
-      }
-    });
-  } catch (e) {
 
-  }
 }

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

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-if="!pending">
         <article v-for="article in articles" v-bind:key="article.id">
             <span>{{ article.title }}</span>
             <span>{{ article }}</span>
@@ -13,27 +13,29 @@
 
 <script>
     import articleApi from "../../api/articleApi";
-    import authApi from "../../api/authApi";
+    import authentication from "../../middlewares/authentication";
 
     export default {
         name: "List",
         data() {
           return {
             articles: [],
-            pending: false
+            pending: true
           }
         },
         async beforeCreate() {
           try {
-            await authApi.session(this.$cookie.get('accessToken'));
+            await authentication.bind(this)();
           } catch (e) {
-            alert('토큰이 존재하지 않거나 올바르지 않은 토큰입니다.');
+            alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
-            await this.$router.push('/');
+            await this.$router.replace('/');
+            return;
           }
 
           try {
             const result = await articleApi.getArticles.bind(this)({});
             this.articles = result.data;
+            this.pending = false;
           } catch (err) {
             alert('문제가 발생하였습니다.');
             console.log(err.response);

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

@@ -1,21 +1,67 @@
 <template>
     <div>
-        <form ></form>
+        <form @submit="submit">
+            <div class="row">
+                <label for="title">Title</label>
+                <input type="text" id="title" v-model="title">
+            </div>
+            <div class="row">
+                <label for="content">Content</label>
+                <textarea id="content" v-model="content"></textarea>
+            </div>
+            <div class="row">
+                <button type="submit">확인</button>
+            </div>
+        </form>
     </div>
 </template>
 
 <script>
-  import articleApi from "../../api/articleApi";
+    import articleApi from "../../api/articleApi";
-  import authApi from "../../api/authApi";
+    import authentication from "../../middlewares/authentication";
 
   export default {
     name: "Write",
+    data() {
+      return {
+        title: '',
+        content: ''
+      }
+    },
+    async beforeCreate() {
+      try {
+        authentication.bind(this)();
+      } catch (e) {
+        alert('토큰이 존재하지 않거나 유효하지 않은 토큰입니다.');
+        await this.$router.replace('/');
+      }
+    },
     methods: {
+        submit: async function(evt) {
+          evt.preventDefault();
 
+          const {title, content} = this;
+
+          const data = {
+            title,
+            content
+          };
+
+          try {
+            await articleApi.postArticle.bind(this)(data);
+            await this.$router.push('/articles');
+          } catch (err) {
+            alert('문제가 발생하였습니다.');
+            console.log(err);
+          }
+
+        }
     }
   }
 </script>
 
 <style scoped>
-
+    label {
+        display: block;
+    }
 </style>

src/front/src/utils/commonUtil.js

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

src/main/java/com/example/vue/domain/article/ArticleController.java

@@ -2,6 +2,7 @@ package com.example.vue.domain.article;
 
 import lombok.RequiredArgsConstructor;
 import org.springframework.data.domain.Pageable;
+import org.springframework.transaction.annotation.Transactional;
 import org.springframework.web.bind.annotation.*;
 
 import javax.validation.Valid;
@@ -20,6 +21,7 @@ public class ArticleController {
     }
 
     @PostMapping
+    @Transactional
     public ArticleResponseDto postArticles(@RequestBody @Valid ArticleRequestDto articleRequestDto) {
         return articleService.save(articleRequestDto);
     }